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学习笔记(十四) window对象使用介绍
Jun 20 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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
360通用php防护代码(使用操作详解)
2013/06/18 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
Promise扫盲贴
2019/06/24 Javascript
小程序实现投票进度条
2019/11/20 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
python操作redis的方法
2015/07/07 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
竞聘上岗演讲稿
2014/05/16 职场文书
爱心助学感谢信
2015/01/21 职场文书
仰望星空观后感
2015/06/10 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android