关于bootstrap的一些运用

标签：

bootstrap用起来很方便，代码量少，写自适应网站最合适了！

关于bootstrap你必须要知道的几点：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

必须要的meta：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=yes">
<meta name="msapplication-tap-highlight" content="no">

配合运用的media:

<style>
*{font-size:24px;}
@media(max-width:960px){
*{font-size:24px;}
}
@media(max-width:900px){
*{font-size:22px};
}
@media(max-width:800px){
*{font-size:20px};
}
@media(max-width:720px){
*{font-size:16px};
}
@media(max-width:640px){
*{font-size:16px};
}
@media(max-width:480px){
*{font-size:12px};
}
</style>

另外要注意的几点是：

1.container里面可以包含任意标签，我们习惯性用div

2.row的子级必须是col

3.尽量多用bootstrap里面自带的类名，大家都知道很多通用的效果和代码bootstrap都有相应的类名，你只要在你的标签里面加上类名就可以了

4.bootstrap.min.js是依赖jquery而运行的，我们引入js文件时必须先引入jquery文件再引入bootstrap.min.js，并且jquery文件必须是2.0版本以上的

关于bootstrap的一些运用

标签：

原文地址：http://www.cnblogs.com/angelin/p/5151444.html