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 相关文章推荐
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
js charAt的使用示例
Feb 18 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
js实现网页抽奖实例
Aug 05 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
jQuery选择器基础入门教程
May 10 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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实现分页工具类分享
2014/01/09 PHP
JavaScript触发器详解
2007/03/10 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
基于python实现学生信息管理系统
2019/11/22 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
如何理解python对象
2020/06/21 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
用python写爬虫简单吗
2020/07/28 Python
详解python metaclass(元类)
2020/08/13 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
社团活动策划书范文
2014/01/09 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
师范大学生求职信
2014/06/13 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
2014年教务工作总结
2014/12/03 职场文书
小学教师年度个人总结
2015/02/05 职场文书