Bootstrap CSS使用方法


Posted in Javascript onDecember 23, 2016

Bootstrap中CSS的使用方法,供大家参考,具体内容如下

1、GitHub上这样介绍 bootstrap:

☑  简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
☑  基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。
☑  自定义JQuery插件,完整的类库,基于Less等。

2、bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可。

同理为使IE6、7、8版本浏览器兼容css3样式,引入下面代码:

3、Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype)

4、Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备。为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
(initial-scale=1.0, maximum-scale=1.0, user-scalable=no)

5、响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

6、全局样式(reset.css)
Bootstrap框架在这一部分做了一定的变更,不再一味追求归零,而是更注重重置可能产生问题的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,具体说明如下:

  • 移除body的margin声明
  • 设置body的背景色为白色
  • 为排版设置了基本的字体、字号和行高
  • 设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式

Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。
请看下面有关 body 的设置:

body { 
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; 
font-size: 14px; 
line-height: 1.428571429; 
color: #333333; 
background-color: #ffffff; 
}

7、避免跨浏览器的不一致

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。
Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JQuery调用Session的实现代码
Oct 29 Javascript
js数组的操作详解
Mar 27 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
js实现简单放大镜效果
Mar 07 Javascript
基于javascript实现放大镜特效
Dec 03 Javascript
Bootstrap源码解读导航(6)
Dec 23 #Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 #Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 #Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 #Javascript
JS中微信小程序自定义底部弹出框
Dec 22 #Javascript
Bootstrap源码解读表单(2)
Dec 22 #Javascript
javascript学习之json入门
Dec 22 #Javascript
You might like
php Memcache 中实现消息队列
2009/11/24 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
php中{}大括号是什么意思
2013/12/01 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
php中执行系统命令的方法
2015/03/21 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
H5实现仿flash效果的实现代码
2017/09/29 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
python实现抖音视频批量下载
2018/06/20 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
python和php哪个更适合写爬虫
2020/06/22 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
工作自荐信
2013/12/11 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
教师党员公开承诺书
2014/03/25 职场文书
竞聘书模板
2014/03/31 职场文书
组织委员竞选稿
2015/11/21 职场文书
python在package下继续嵌套一个package
2022/04/14 Python