bootstrap学习笔记–bootstrap布局方式

Bootstrap 3 是运动设备优先的,在此义及,Bootstrap
代码从小屏幕设备(比如移动装备、平板计算机)开始,然后扩展及不可开交屏幕设备(比如笔记本电脑、台式电脑)上之零部件和网格。

挪设备优先政策

  • 内容
    • 控制什么是极度要之。
  • 布局
    • 先规划更小的肥瘦。
    • 基础的 CSS 是活动装备优先,媒体询问是针对被平板电脑、台式电脑。
  • 日趋进增强
    • 趁着屏幕尺寸的增而弥加元素。

响应式网格系统就屏幕或视口(viewport)尺寸的增多,系统会自动分成最多12排。如下图:

图片 1

Bootstrap 网格系统(Grid System)的做事原理

网格系统经过平等层层包含内容的行及排来创造页面布局。下面列有了 Bootstrap
网格系统是哪行事的:

  • 执行务放在 .container class
    内,以便得到适当的对准齐(alignment)和内边距(padding)。
  • 用实行来创造列的水平组。
  • 情应放置于排列内,且只列好是行之直白子元素。
  • 预定义的网格类,比如 .row 和 .col-xs-4,可用来快速创建网格布局。LESS
    混合类可用于更多语义布局。
  • 排通过内边距(padding)来创造列内容里的闲暇。该内边距是透过 .rows 上之异乡距(margin)取负,表示第一列和最终一排列的行偏移。
  • 网格系统是通过点名您想要迈出的十二独可用之列来创建的。例如,要开创三单当的排,则用三独 .col-xs-4

传媒询问

传媒询问是雅了不起的”有规则的 CSS
规则”。它独自适用于片基于某些规定条件的
CSS。如果满足那些条件,则用相应的体裁。

Bootstrap
中之传媒询问允许你基于视口大小活动、显示并隐蔽内容。下面的传媒询问在
LESS 文件被运用,用来创造 Bootstrap 网格系统受之显要的分界点阈值。

/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备(台式电脑,992px 起) */
@media (min-width: @screen-md-min) { ... }

/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-lg-min) { ... }

咱们偶尔为会见在媒体询问代码中涵盖 max-width,从而将 CSS
的熏陶范围以又小范围之屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

传媒询问有个别单部分,先是一个配备正式,然后是一个轻重缓急规则。在方的案例被,设置了下列的条条框框:

被我们来拘禁下面这行代码:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于持有带有 min-width:
@screen-sm-min
 的设备,如果屏幕的宽窄小于 @screen-sm-max,则会进行部分拍卖。

网格选项

下表总结了 Bootstrap 网格系统如何过多单装备工作:

  超小设备手机(<768px) 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px) 大型设备台式电脑(≥1200px)
网格行为 一直是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

 

 

 

 

 

 

 

 

 

 

着力的网格结构

下是 Bootstrap 网格的中坚构造:

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

脚是只实际代码实例:

<div class="container">
        <h1>Hello, world!</h1>
        <div class="row">
            <!--超小设备手机(<768px) -->
            <div class="col-xs-1" style="background: #f00">1</div>
            <div class="col-xs-1" style="background: #b2b0b0">2</div>
            <div class="col-xs-1" style="background: #ff6a00">3</div>
            <div class="col-xs-1" style="background: #ffd800">4</div>
            <div class="col-xs-1" style="background: #4cff00">5</div>
            <div class="col-xs-1" style="background: #0ff">6</div>
            <div class="col-xs-1" style="background: #0094ff">7</div>
            <div class="col-xs-1" style="background: #b200ff">8</div>
            <div class="col-xs-1" style="background: #ff00dc">9</div>
            <div class="col-xs-1" style="background: #ff006e">10</div>
            <div class="col-xs-1" style="background: #ac5050">11</div>
            <div class="col-xs-1" style="background: #54bd4f">12</div>
        </div>
        <div class="row">
            <!--小型设备平板电脑(≥768px) -->
            <div class="col-sm-4" style="background: #b2b0b0">1</div>
            <div class="col-sm-4" style="background: #ffd800">1</div>
            <div class="col-sm-4" style="background: #ac5050">1</div>
        </div>
        <div class="row">
            <!--中型设备台式电脑(≥992px) -->
            <div class="col-md-4" style="background: #ac5050">1</div>
            <div class="col-md-8" style="background: #54bd4f">1</div>
        </div>
        <div class="row">
            <!--大型设备台式电脑(≥1200px) -->
            <div class="col-lg-8" style="background: #ac5050">1</div>
            <div class="col-lg-4" style="background: #54bd4f">1</div>
        </div>
    </div>

偏移列

舞狮是一个用以更规范的布局之灵光功能。它们可用来受列腾出还多之长空。例如,.col-xs=* 类不支持偏移,但是其得以省略地由此使用一个缺损的才元格来促成该意义。

为以大屏幕显示器上采取偏移,请用 .col-md-offset-* 类。这些类似会管一个列的左外边距(margin)增加 * 列,其中 * 范围是由 1到 11

以下面的实例中,我们发出 <div
class=”col-md-6″>..</div>,我们用应用 .col-md-offset-3 class
来放在中这 div。

<div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-offset-3"
                style="background-color: #dedef8;">
                <p>
               测试偏移列---此处往右偏移了3列
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-1" style="background: #f00">1</div>
            <div class="col-xs-1" style="background: #b2b0b0">2</div>
            <div class="col-xs-1" style="background: #ff6a00">3</div>
            <div class="col-xs-1" style="background: #ffd800">4</div>
            <div class="col-xs-1" style="background: #4cff00">5</div>
            <div class="col-xs-1" style="background: #0ff">6</div>
            <div class="col-xs-1" style="background: #0094ff">7</div>
            <div class="col-xs-1" style="background: #b200ff">8</div>
            <div class="col-xs-1" style="background: #ff00dc">9</div>
            <div class="col-xs-1" style="background: #ff006e">10</div>
            <div class="col-xs-1" style="background: #ac5050">11</div>
            <div class="col-xs-1" style="background: #54bd4f">12</div>
        </div>
    </div>

显示力量:

图片 2

嵌套列

以当内容中嵌套默认的网格,请加加一个新的 .row,并于一个曾经部分 .col-md-* 列内加加同组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不可知超越12(其实,没有要求你得占用满12排)。

每当下面的实例中,布局有少数只列,第二排列被分成两执行四个盒子。

<div class="container">
        <div class="row">
            <div class="col-xs-4" style="background: #b2b0b0">第一列</div>
            <div class="col-xs-8" style="background: #dedef8">第二列--里面嵌套了四个DIV
                <div class="row">
                    <div class="col-xs-6" style="background: #0094ff">我是内容一<br /><br /><br /></div>
                    <div class="col-xs-6" style="background: #b200ff">我是内容二</div>
                </div>
                <div class="row">
                    <div class="col-xs-6" style="background: #ff00dc">我是内容三<br /><br /><br /></div>
                    <div class="col-xs-6" style="background: #ff006e">我是内容四</div>
                </div>
            </div>
        </div>
    </div>

展示力量:

图片 3

列排序

Bootstrap
网格系统外一个宏观的风味,就是你可以挺易地盖同栽顺序编写列,然后为任何一样种植顺序显示列。

君得死自由地转移带有 .col-md-push-* 和 .col-md-pull-* 类的放置网格列的相继,其中 * 范围是从 1 到 11

以底下的实例中,我们发出一定量排列布局,左列很狭小,作为侧边栏。我们拿利用 .col-md-push-* 和 .col-md-pull-* 类来互换就点儿排的一一。

<div class="container">
        <div class="row">
            <div class="col-xs-4 col-md-push-8" style="background: #ff00dc">左边</div>
            <div class="col-xs-8 col-md-pull-4" style="background: #ff006e">右边</div>
        </div>
    </div>

亮力量:

图片 4

相关文章