一、bootstrap结构
bootstrap/
-----css/
-------bootstrap.css
-------bootstrap.min.css
-------bootstrap.theme.css
-------bootstrap.theme.min.css
-----js/
-------bootstrap.js
-------bootstrap.min.js
-----fonts/
-------glyphicons-halflings-regular.eot
-------glyphicons-halflings-regular.svg
-------glyphicons-halflings-regular.woff
bootstrap的js插件依赖于jQuery,因此jQuery要在bootstrap之前引用
把css放在head中,把 js 放在body的最下面
二、标准模板
——首先是html5的定义
——页面utf-8编码
——bootstrap不支持IE的兼容模式(在IE中运行最新的渲染模式)
——viewport初始化移动浏览显示,宽度是设备宽度,设置初始载入缩放比例为1,不缩放=视口的宽度等于物理上真实的分辨率
——载入bootstrap的css样式
——IE版本低于IE9,引入2个js,一个让IE8支持html5标签,一个支持媒体查询(html5shiv.js的作用是 让IE6-8识别html5新元素
html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
)
——加入jQuery和Bootstrap
标准模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING:Respond.js doesn't work if you view the page via file:// -->
<!--[ if It IE 9 ]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![ endif ]-->
</head>
<body>
<h1>Hello World ! </h1>
<!--jQuery(necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--Include all compiled plugins (below),or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
三、Bootstrap中的css
bootstrap是移动设备优先的,针对移动设备的样式融合进了框架的每个角落,可以实现漂亮的响应式布局
初始化样式使用的Normalize.css
Grid system 栅格结构(最多12列)
工作原理:
1、行必须包含在container容器中,只有列可以作为行的直接子元素,内容放在列中。
2、通过设置padding ,设定列与列的间隔
3、为第一和最后一列设置 负值的margin从而抵消掉padding的影响
4、列通过1~12 的值表示其跨越的范围
5、class在屏幕屏幕大于等于阈值的设备上起作用,并针对小屏幕设置的class覆盖掉
6、对各种不同屏幕的分辨率设置了不同的class,达到不同的显示效果。
7、table样式,边框条纹鼠标变色。。
四、bootstrap中的组件 (glyphs)
包含很多可以复用的组件,图标、下拉菜单、导航、警告框、弹出框等。
五、bootstrap中的JavaScript插件
bootstrap中包含一系列的jQuery插件,可以简单一次性引入所有插件,或者单个引入页面中来
引入bootstrap.js 或 bootstrap.min.js
以tooltip.js为例设置 Data 属性
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="Tooltip on left">Tooltip on left</button>
可以用$('#example').tooltip(options)设置tooltip的配置项
六、定制bootstrap
通过自定义bootstrap组件,less变量和jQuery插件,可以定制一份属于自己的bootstrap版本