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中的Location地址对象
Jan 16 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
js异常捕获方法介绍
Apr 10 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
express.js中间件说明详解
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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python自动重试第三方包retrying模块的方法
2018/04/24 Python
python返回数组的索引实例
2019/11/28 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
C#面试题
2016/05/06 面试题
小学生迎国庆演讲稿
2014/09/05 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
个人委托书范本
2014/09/13 职场文书
会议主持词结束语
2015/07/03 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python