通过CDN引入jQuery和bootstrap
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
网页的基本设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width=device-width
width 属性控制设备的宽度.
假设您的网站将被带有不同屏幕分辨率的设备浏览, 那么将它设置为 device-width即设备的屏幕宽度.
initial-scale=1.0
页面初始化时的缩放级别
maximum-scale=1.0, minimum-scale=1.0
页面缩放的最大最小级别
user-scalable=no
用户是否可以进行缩放
网格系统(grid system)
bootstrap自动把屏幕分为12个网格
根据当前屏幕宽度分为4种情况
.col-xs- .col-sm- .col-md- .col-lg-
分别对应屏幕宽度 <768, >=768, >=992, >=1200
应用
基本格式如下:
<div class="container">
<div class="row" class="col-*-*">
...
</div>
<div class="row" class="col-*-*">
...
</div>
</div>
container为网格的容器
row表示为一行,一行即前面说的12个分段
响应式的列重置
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-3 col-lg-6 col-sm-2 col-xs-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>陪你度过最黑暗的夜晚的人，才是值得与之共度最辉煌的日子的</p>
<p>能冲刷一切的除了眼泪，就是时间，以时间来推移感情，时间越长，冲突越淡，仿佛不断稀释的茶。</p>
</div>
<div class="col-md-1 col-sm-1 col-xs-4"></div>
<div class="col-md-8 col-lg-6 col-sm-9 col-xs-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>世上没有不平的事，只有不平的心；不去怨，不去恨，淡然一切；经历了，醉了，醒了，碎了，结束了，忘记吧！</p>
<p>不要去把时间浪费在错误的人身上。人生都是短暂，所以你不该把你的宝贵岁月与压榨你幸福的人分享。假如别人真的是需要你，他们自是会腾出一片空间留给你。有的时候我们就无须苦苦地区挣扎，放弃那也是种选择。</p>
</div>
</div>
</div>
现在demo中有一行, 这一行中有三个div元素, 两个带鸡汤, 一个不带
3个div分别设置了不同屏幕的占比大小(总数一定要是12)
在最小屏幕中(即col-xs-)中, 第一个鸡汤div占比是4, 第二个空白div占比是4, 第三个鸡汤div占比是4, 其实也是把他们三个div三等分了, 如图的效果*
超小屏幕
在小型屏幕中(即col-sm-)中, 第一个鸡汤div占比是2, 第二个空白div占比是1, 第三个鸡汤div占比是9, 如图的效果*
小型屏幕
在第二个空白div中, 没有设置大型设备的占比, 效果就是在大型设备上不会显示, 但注意的是:在一个row中, 其他的占比一定要等于12
大型屏幕
列偏移
简单的应用就是如果一个row只有一个div时, 控制居中据左右等.
使用
col-xx-offset-*
现在我们在原有的容器里再添加一个row元素.
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-6" style="background-color: #f6faf6; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>冰冻三尺非一日之寒，不要冷了一颗对你火热的心，不要淡了一份对你挚爱的情。再深的感情也有底线，如你不在乎，别人又何必卑微自己。真诚才能永相守，珍惜才配长拥有。人在世间走，本是一场空，何必处处计较，步步不让。话多了伤人，计较多了伤神，与其伤人又伤神，不如不烦神。一辈子就图个无愧于心，自在悠然。心幸福，日子</p>
</div>
</div>
这里样式设置的为在中型屏幕占比6, 偏移3个占比, 即居中.
在小型屏幕中, 占比6, 偏移6个占比, 即居左.
效果如下:
中型屏幕居中
小屏屏幕居左
嵌套列
在一个row元素下, 还可以嵌套不同的row元素, 嵌套后的row元素总数还是12.
下面再增加一个row元素div
<div class="row">
<div class="col-md-3" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
</div>
<div class="col-md-9" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 嵌套两个row</h4>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二列嵌套的第一行row 第一个div 占比6</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二列嵌套的第一行row 第二个div 占比6...陪你度过最黑暗的夜晚的人，才是值得与之共度最辉煌的日子的人。</p>
</div>
</div>
<div class="row">
<div class="col-md-3" style="background-color: #B18904; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二列嵌套的第二行row 第一个div 占比3</p>
</div>
<div class="col-md-9" style="background-color: #B18904; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二列嵌套的第二行row 第二个div 占比9...</p>
</div>
</div>
</div>
</div>
在第二个row元素中, 嵌套了两个row元素, 分别占比为6,6和3,9
效果如下:
嵌套列
push&pull
col-xx-push-* & col-xx-pull-*
*的范围1-11, 字面意思很明显, 推和拉
响应效果是把某个col元素偏移一段, 可以做排序用.
<div class="row">
<div class="col-md-3" style="background-color: #f6faf6; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我是第一个
</div>
<div class="col-md-3" style="background-color: #f6faf6; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我是第二个
</div>
<div class="col-md-3" style="background-color: #f6faf6; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我是第三个
</div>
<div class="col-md-3" style="background-color: #f6faf6; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我是第四个
</div>
</div>
<br>
<div class="row">
<div class="col-md-3 col-md-push-1" style="background-color: #f6faf6; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我被push了1个单位
</div>
<div class="col-md-3" style="background-color: #f6faf6; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我是第二个
</div>
<div class="col-md-3 col-md-pull-1" style="background-color: #f6faf6; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我被pull了1个单位
</div>
<div class="col-md-3" style="background-color: #f6faf6; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我是第四个
</div>
</div>
上面所示 第二行row中的第一个div和第三个div 分别进行push和pull.
效果如下:
push&pull
今天整理到这, 基本上算是bootstrap的入门和网格系统的基本介绍.
网友评论