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 相关文章推荐
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
从0到1搭建element后台框架优化篇(打包优化)
May 12 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
简单的页面缓冲技术
2006/10/09 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
浅谈微信小程序flex布局基础
2018/09/10 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
python实现汉诺塔算法
2021/03/01 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
python3获取url文件大小示例代码
2019/09/18 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
jupyter notebook实现显示行号
2020/04/13 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
爱耳日宣传活动总结
2014/07/05 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
防卫过当辩护词
2015/05/21 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书