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)

Bootstrap 1

3、响应式工具

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

Bootstrap 2

4、具体代码实现:(headBootstrap部分直接参照模板)

 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>

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

Bootstrap 3

 

高中档屏幕:

Bootstrap 4

小屏幕:

Bootstrap 5

 

相关文章