bootstrap学习笔记–bootstrap布局格局

嵌套列

为了在剧情中嵌套默许的网格,请添加三个新的 .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>

来得效果:

Bootstrap 1

网格选项

下表总括了 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

 

 

 

 

 

 

 

 

传播媒介询问

媒体询问是不行了不起的”有原则的 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) { ... }

传播媒介询问有四个部分,先是1个设备正式,然后是三个大大小小规则。在上头的案例中,设置了下列的平整:

让大家来看下边这行代码:

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

对此有所带有 min-width:
@screen-sm-min
 的设备,尽管荧屏的宽窄小于 @screen-sm-max,则会展开部分拍卖。

偏移列

舞狮是1个用于更规范的布局的灵光成效。它们可用来给列腾出越来越多的长空。例如,.col-xs=* 类不帮衬偏移,不过它们能够归纳地通过应用2个空的单元格来落到实处该意义。

为了在大显示器显示屏上选用偏移,请使用 .col-md-offset-* 类。这个类会把1个列的左外边距(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>

来得效果:

Bootstrap 2

列排序

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>

呈现效果:

Bootstrap 3

 

移动装备优先政策

  • 内容
    • 决定哪些是最根本的。
  • 布局
    • 优先规划更小的小幅。
    • 基本功的 CSS 是活动设备优先,媒体询问是针对性于GALAXY Tab、台式电脑。
  • 渐进增强
    • 乘胜显示屏大小的增多而添日成分。

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

Bootstrap 4

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

网格系统通过一各样涵盖内容的行和列来成立页面布局。上边列出了 Bootstrap
网格系统是什么工作的:

  • 行必须放置在 .container class
    内,以便得到十分的对齐(alignment)和内边距(padding)。
  • 运用行来创设列的水平组。
  • 内容应当放置在列内,且只有列能够是行的直接子成分。
  • Bootstrap,预约义的网格类,比如 .row 和 .col-xs-4,可用来赶快成立网格布局。LESS
    混合类可用来更加多语义布局。
  • 列通过内边距(padding)来创立列内容之间的空闲。该内边距是透过 .rows 上的外市距(margin)取负,表示第③列和最后一列的行偏移。
  • 网格系统是经过点名您想要横跨的十二个可用的列来成立的。例如,要开创八个格外的列,则应用多少个 .col-xs-4

 

Bootstrap 3 是活动装备优先的,在那个意义上,Bootstrap
代码从小显示屏设备(比如移动设备、苹果平板)开头,然后扩张到大荧屏设备(比如台式机电脑、台式电脑)上的零件和网格。

着力的网格结构

上边是 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>

相关文章