BootStrap学习(二)——重写首页之topbar
1、布局容器
帮助文档:http://v3.bootcss.com/css/#overview-container
BootStrap需要为页面内容和栅栏系统包裹一个.container容器。提供的两个容器如下,注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
1).container类用于固定宽度并支持响应式布局的容器’
1 <div class="container"> 2 ... 3 </div>
2).container-fluid类用于 100% 宽度,占据全部视口(viewport)的容器。
1 <div class="container-fluid"> 2 ... 3 </div>
2、栅格系统
1)帮助文档:http://v3.bootcss.com/css/#grid-options
2)Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
3)特点:
a.“行(row)”必须包含在.container(固定宽度)或 .container-fluid (100% 宽度)中
b.“列(column)”可以作为行(row)的直接子元素
c.行使用的样式“.row”,列使用的样式“col-*-*”,内容应置于“列(column)”内
d.列大于12时,将另起一行排列
e.栅格类适用于与屏幕宽度大于等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。
4)栅格参数(large:lg、medium:md、small:sm、x small:xs)
3、响应式工具
帮助文档:http://v3.bootcss.com/css/#responsive-utilities
4、具体代码实现:(head部分直接参照模板)
1 <!--logo部分--> 2 <div class="container"> 3 <div class="row"> 4 <div class="col-lg-4 col-md-4 col-sm-6"> 5 <img src="../img/logo2.png"/> 6 </div> 7 <div class="col-lg-5 col-md-4 hidden-xs col-sm-6" > 8 <img src="../img/header.png" /> 9 </div> 10 <div class="col-lg-3 col-md-4 col-sm-12" style="padding-top: 15px;"> 11 <a href="#">登录</a> 12 <a href="#">注册</a> 13 <a href="#">购物车</a> 14 </div> 15 </div> 16 </div>
在谷歌浏览器内运行,效果如下(大屏幕):
中等屏幕:
小屏幕: