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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
JS数组的常见用法实例
Feb 10 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 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中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
jquery遍历input取得input的name
2009/04/27 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python最长回文串算法
2018/06/04 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
在求职信中如何凸显个人优势
2013/10/30 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL