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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 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面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
js实现3D旋转效果
2020/08/18 Javascript
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python实现kNN算法
2017/12/20 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Python字典底层实现原理详解
2019/12/18 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
大学生社会实践活动总结
2014/07/03 职场文书
大专学生求职自荐信
2014/07/06 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
公司员工辞职信范文
2015/05/12 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
学困生转化工作总结
2015/08/13 职场文书