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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
分析JS中this引发的bug
Dec 12 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
在vue中使用G2图表的示例代码
Mar 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检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python生成excel的实例代码
2017/11/08 Python
pandas的qcut()方法详解
2019/07/06 Python
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
神路信息Java面试题目
2013/03/31 面试题
nohup的用法
2012/11/26 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
建筑公司文秘岗位职责
2013/11/29 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
学校欢迎标语
2014/06/18 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
中学教师教学工作总结
2015/08/13 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
Python函数对象与闭包函数
2022/04/13 Python