系统学习Javaweb10----BootStrap2

bootstrap2

3.布局容器

  bootstrap必须至少需要一个布局容器，才能为界面内容进行封装和方便的样式控制，

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container"> ... </div>

 

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid"> ... </div>

 

 

 

 

 

4.栅格系统

4.1简述栅格系统

为了方便在布局容器中进行网页的布局操作。

bootstrap提供了一套专门用于响应式开发的栅格系统。

栅格系统将一行分为12列，通过设定元素占用列数来  布局元素在页面上的展示位置。

作用：可以让开发人员更加轻松进行网页布局，并且轻松进行响应式开发。

 

位置：全局CSS样式—栅格系统。

 

4.2栅格系统的特点及入门案例

栅格特点 ：

  行（row）必须包含在.container（固定宽度）或者.container-fluid（100%宽度）中。

  行使用的样式“.row”，列使用的样式“col-*-*”元素内容应该放置于“列（column）”内

  基本的书写方式必须是：容器-行-列

 

栅格参数：“col-屏幕尺寸-占用列数”

 

列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上。

列元素的占用列数，定义列元素的大小。

 

注：

一个row下，如果设置的col列数总和小于等于12，那么row下元素在一行排列；

一个row下，如果设置的col列数总和大于12，那么超出的元素会另起一行排列；

行和列可以无限嵌套，嵌套方式必须为  行…列…行…列…行…

一个row元素下，有12列。

 

4.3栅格屏幕尺寸设置

 

进行屏幕尺寸设置时的注意事项：

  如果没有设置当前屏幕尺寸  样式  默认一个元素占一行

  如果设置了一个屏幕尺寸，比这个大的屏幕，继承了当前的设置，比这个小的屏幕，默认一个元素占一行。

 

4.5列偏移

通常情况下我们需要将元素居中显示，需要左边空出一定的空白区域，这里我们就可以使用列偏移来达到效果。

.col-屏幕尺寸-offset-*   在指定屏幕尺寸下，向右偏移*个列。

 

5.响应式工具

  为针对性的在移动页面上展示和隐藏不同的内容，bootstrap提供响应式工具。

  可以让开发人员通过该工具决定，在何种屏幕尺寸下，隐藏或者显示某些元素。

帮助手册位置：全局CSS样式—响应式工具。