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 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 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中数据的批量导入(csv文件)
2006/10/09 PHP
杏林同学录(三)
2006/10/09 PHP
php 文本文件的读取效率
2012/02/10 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
python中元组的用法整理
2020/06/15 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
建筑横幅标语
2014/10/09 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书