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)

图片 1

3、响应式工具

帮衬文档:http://v3.bootcss.com/css/\#responsive-utilities

图片 2

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>

在谷歌(谷歌(Google))浏览器内运行,效果如下(大屏幕):

图片 3

 

当中屏幕:

图片 4

小屏幕:

图片 5

 

相关文章