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.validate使用攻略 第一部
Jul 01 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
javascript this指向相关问题及改变方法
Nov 19 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中的正则表达式
2014/08/17 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
Javascript的一种模块模式
2010/09/08 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
详解JavaScript函数
2015/12/01 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
webpack入门必知必会
2017/01/16 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
教育学专业毕业生的自我评价
2013/11/21 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
应用英语专业自荐信
2014/01/26 职场文书
思想品德自我评价
2014/02/04 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
企业安全生产标语
2014/06/06 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
新闻通讯稿范文
2015/07/22 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
python之基数排序的实现
2021/07/26 Python