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变量函数浅析
Sep 02 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
详解JavaScript函数callee、call、apply的区别
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 各种排序算法实现代码
2009/08/20 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
Python单链表原理与实现方法详解
2020/02/22 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Django更新models数据库结构步骤
2020/04/01 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
如何获得EntityManager
2014/02/09 面试题
干部培训自我鉴定
2014/01/22 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
努力工作保证书
2015/02/28 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书