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 CSS操作方法集合
Oct 31 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 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安装攻略:常见问题解答(二)
2006/10/09 PHP
生成静态页面的PHP类
2006/11/25 PHP
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
js实现网页随机验证码
2020/10/19 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Python切片用法实例教程
2014/09/08 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python GUI编程完整示例
2019/04/04 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
农村结婚典礼司仪主持词
2014/03/14 职场文书
清洁工个人工作总结
2015/03/05 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python