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实现轮显新闻标题链接
Aug 13 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 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 checkbox 取值详细说明
2010/08/19 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php正则修正符用法实例详解
2016/12/29 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
微信小程序开发探究
2016/12/27 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
python lxml中etree的简单应用
2019/05/10 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python变量的作用域是什么
2020/05/26 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
汉语言文学毕业生求职信
2013/10/01 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
二手书店创业计划书
2014/01/16 职场文书
艺术节主持词
2014/04/02 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
活动总结格式
2014/08/30 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL