Bootstrapbootstrap入门-三.响应式原理

Bootstrap网格系统(Grid System)

  响应式网格系统随着显示器或视口(viewport)尺寸的充实,系统会活动分成最多1贰列。

1

1

1

1

1

1

1

1

1

1

1

1

4

4

4

4

8

6

6

12

 

做事规律

  ·
行必须放置在 .container class
内,以便获得万分的对齐(alignment)和内边距(padding)。

  ·
使用行来创立列的水平组。

  ·
内容应该放置在列内,且唯有列能够是行的直白子元素。

  ·
预订义的网格类,比如 .row 和 .col-xs-四,可用以飞快创设网格布局。LESS
混合类可用于愈来愈多语义布局。

  ·
列通过内边距(padding)来创制列内容之间的茶余饭后。该内边距是经过 .rows 上的异地距(margin)取负,表示第一列和结尾1列的行偏移。

  ·
网格系统是透过点名您想要横跨的十2个可用的列来创立的。例如,要开创四个格外的列,则动用八个 .col-xs-四。

 

传媒询问

/* 超小设备(手机,小于 768px) */

/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备(平板电脑,768px 起) */

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

/* 中型设备(台式电脑,992px 起) */

@media (min-width: @screen-md-min) { ... }

/* 大型设备(大台式电脑,1200px 起) */

@media (min-width: @screen-lg-min) { ... }

 

跨设备工作

 

超小设备手机(<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

 

网格的中央结构

<div class="container">

   <div class="row">

      <div class="col-*-*"></div>

      <div class="col-*-*"></div>      

   </div>

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

</div>

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

 

以身作则1:水平堆叠

  代码如下:

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 堆叠的水平</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

   <h1>Hello, world!</h1>



   <div class="row">



      <div class="col-md-6"  style=" box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

         </p>



         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

            quae ab illo inventore veritatis et quasi architecto beatae vitae

            dicta sunt explicabo.

         </p>

      </div>



      <div class="col-md-6" style="box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium.

         </p>



         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

            consectetur, adipisci velit, sed quia non numquam eius modi

            tempora incidunt ut labore et dolore magnam aliquam quaerat

            voluptatem.

         </p>

   </div>

</div>

</body>

</html>

  效果:

Bootstrap 1

  确定保障险单元的总数为1二以维持展现效果比较和谐。超越1二就串行了。若是单个行的单元数超越1二吧:

Bootstrap 2

  如上海体育场合所示,单个行的单元数超越1二会失去内边距。

 

演示贰:中型和重型设备

  睡得晚起得早还多梦,也是没治了。

  中型设备是五成/3/六,大型设施是33%/6陆%,那么能够那样写:

<div class="col-md-6 col-lg-4">....</div>

<div class="col-md-6 col-lg-8">....</div>

  源码如下:

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 中型和大型设备</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

   <h1>Hello, world!</h1>



   <div class="row">



      <div class="col-md-6 col-lg-4"  style="

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

         </p>



         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

            quae ab illo inventore veritatis et quasi architecto beatae vitae

            dicta sunt explicabo.

         </p>

      </div>



      <div class="col-md-6 col-lg-8" style="

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium.

         </p>



         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

            consectetur, adipisci velit, sed quia non numquam eius modi

            tempora incidunt ut labore et dolore magnam aliquam quaerat

            voluptatem.

         </p>

   </div>

</div>

</body>

</html>

  若如此,中型设备的呈现是六分之三/2/4:

Bootstrap 3

  大型装备的来得是33%/6陆%:

Bootstrap 4

  同理移动设备也可进行类似装置:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>

<div class="col-sm-9 col-md-6 col-lg-8">....</div>

  源码及意义略。

 

响应式的列重置

  小设备时无法分明网格显示的职责。

  消除办法是丰富叁个响应式的块(描述未必准确),使用.clearfix
class和响应式实用工具:

<div class="container">

    <div class="row" >

        <div class="col-xs-6 col-sm-3"

            style="

            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

        </div>

        <div class="col-xs-6 col-sm-3"

        style="box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

            </p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut.

            </p>

        </div>



        <div class="clearfix visible-xs"></div>



        <div class="col-xs-6 col-sm-3"

        style="

        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco

            laboris nisi ut aliquip ex ea commodo consequat.

            </p>

        </div>

        <div class="col-xs-6 col-sm-3"

        style="box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim

            </p>

        </div>

    </div>

</div>

  解释一下中间那句:

<div class="clearfix visible-xs"></div>

  响应式实用工具近日适用于块和表切换。看下边五个表格就精晓了。

 

超小屏幕
手机 (<768px)

小屏幕
平板 (≥768px)

中等屏幕
桌面 (≥992px)

大屏幕
桌面 (≥1200px)

.visible-xs-*

可见

隐藏

隐藏

隐藏

.visible-sm-*

隐藏

可见

隐藏

隐藏

.visible-md-*

隐藏

隐藏

可见

隐藏

.visible-lg-*

隐藏

隐藏

隐藏

可见

.hidden-xs

隐藏

可见

可见

可见

.hidden-sm

可见

隐藏

可见

可见

.hidden-md

可见

可见

隐藏

可见

.hidden-lg

可见

可见

可见

隐藏

 

类组

CSS display

.visible-*-block

display: block;

.visible-*-inline

display: inline;

.visible-*-inline-block

display: inline-block;

 

实例3:响应式实用工具

  源码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 响应式实用工具</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="padding: 40px;">
    <div class="row visible-on">
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            特别小型
            ✔ 在特别小型设备上可见
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            小型
            ✔ 在小型设备上可见
        </div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            中型
            ✔ 在中型设备上可见
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            大型
            ✔ 在大型设备上可见
        </div>
    </div>
</div>

</body>
</html>

  效果如下:

  大型装备时:

 Bootstrap 5

  别的设施略。

 

偏移列

  .col-xs=*类不扶助偏移,能够透过动用一个空的单元格来达成该意义。

  使用.col-md-offset-*类可以把五个列的左外边距扩展*列,其中*的界定是从1到1一。

<div class="container">

    <h1>Hello, world!</h1>

    <div class="row" >

        <div class="col-xs-6 col-md-offset-3"

        style="box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing

            elit.

            </p>

        </div>

    </div>

</div>

  效果:

Bootstrap 6

 

嵌套列

  嵌套必要加上叁个新的.row,然后在那一个嵌套的.row里添加一组.col-md-*列。那组列的个数不可能当先1二。

<div class="container">

    <h1>Hello, world!</h1>

    <div class="row">

        <div class="col-md-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <h4>第一列</h4>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit.

            </p>

        </div>

        <div class="col-md-9" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <h4>第二列 - 分为四个盒子</h4>

            <div class="row">

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        Consectetur art party Tonx culpa semiotics. Pinterest

        assumenda minim organic quis.

                    </p>

                </div>

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                         sed do eiusmod tempor incididunt ut labore et dolore magna

        aliqua. Ut enim ad minim veniam, quis nostrud exercitation

        ullamco laboris nisi ut aliquip ex ea commodo consequat.

                    </p>

                </div>

            </div>

            <div class="row">

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        quis nostrud exercitation ullamco laboris nisi ut

        aliquip ex ea commodo consequat.

                    </p>

                </div>

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        sed do eiusmod tempor incididunt ut labore et dolore magna

        aliqua. Ut enim ad minim.

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>

  效果:

Bootstrap 7

 

 

列排序

  有某个像定位。.col-md-push-*相当于left;.col-md-pull-*类似于right。其中*的限制是从壹到1一。标签在前边的层级高一些。

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <p>排序前</p>

      <div class="col-md-4" style="

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         我在左边

      </div>

      <div class="col-md-8" style="

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         我在右边

      </div>

   </div><br>

   <div class="row">

      <p>排序后</p>

      <div class="col-md-4 col-md-push-1"

         style="

         box-shadow: inset 1px -1px 1px #444,

         inset -1px 1px 1px #444;">

         我在左边

      </div>

      <div class="col-md-8 col-md-pull-2"

         style="

         box-shadow: inset 1px -1px 1px #444,

         inset -1px 1px 1px #444;">

         我在右边

      </div>

   </div>

</div>

  效果:

Bootstrap 8

 

   参考:http://www.runoob.com/bootstrap/bootstrap-grid-system.html

 

 

相关文章