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 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
当json键为数字时的取值方法解析
2013/11/15 Javascript
asm.js使用示例代码
2013/11/28 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
python实现批量修改文件名代码
2017/09/10 Python
简单实现python数独游戏
2018/03/30 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
使用python turtle画高达
2020/01/19 Python
python3 字符串知识点学习笔记
2020/02/08 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
趣味游戏活动方案
2014/02/07 职场文书
单位授权委托书范文
2014/08/02 职场文书
思想作风建设心得体会
2014/10/22 职场文书
公司年夜饭通知
2015/04/25 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
php去除deprecated的实例方法
2021/11/17 PHP
bose降噪耳机音能消除人声吗
2022/04/19 数码科技