菜单

Bootstrap 3 How-To #3 布局

2018年11月15日 - Bootstrap

对 Web
开发以来,一个千古的话题是怎么样创建一个过浏览器兼容的布局。许多年来,各种框架下各种技能来缓解这个题材。Bootstrap
使用了一个不等之不二法门来化解这题目。基于 960 像从的布局
http://960.gs,bootstrap
提供了逾简易的语法,它还支持响应式布局,布局好依据设备的不比尺寸进行调,从桌面电脑及机械和手握紧设备。

于 Web
开发以来,一个永远的话题是哪创建一个超越浏览器兼容的布局。许多年来,各种框架下各种技能来缓解者问题。Bootstrap
使用了一个不比之法子来化解这题目。基于 960 像从的布局
http://960.gs,bootstrap
提供了进一步简易的语法,它还支持响应式布局,布局好依据设备的差尺寸进行调,从桌面电脑及机械和手握紧设备。

原先版本的 bootstrap 在未曾下响应式布局的时刻,使用了 940px 布局使用
span* 和 offset* 布局。在应用响应式布局之时光,网格系统采取 724px 或者
1170px 之增幅。

此前版本的 bootstrap 在未曾行使响应式布局的时段,使用了 940px 布局使用
span* 和 offset* 布局。在用响应式布局的时刻,网格系统采取 724px 或者
1170px 底幅度。

若果愿意利用比例的布局,可以用容器的接近从 .row 替换为 row-fluid。

如若想使比例之布局,可以以容器的好像从 .row 替换为 row-fluid。

3.0 版本对当时等同片发生较大的更动,可以分别特小型设备 xs ( Extra small
devices, 小于 768px 比如手机 ), 小型设备 sm ( Small devices, 小于 992px,
比如平板 ), 中型设备 md ( Medium devices, 小于 1200px,
比如桌面电脑),  大型设施 lg ( Large devices, 比如宽屏显示器 )。

3.0 版本对立即同样组成部分有于坏之变更,可以分特小型设备 xs ( Extra small
devices, 小于 768px 比如手机 ), 小型设备 sm ( Small devices, 小于 992px,
比如平板 ), 中型设备 md ( Medium devices, 小于 1200px,
比如桌面电脑),  大型设备 lg ( Large devices, 比如宽屏显示器 )。

一经 row-fluid 已经休设有了。

若果 row-fluid 已经休在了。

咱们立即就依据此体系创造网站的页面,首先,我们先熟悉 bootstrap
布局之中坚特色。

咱及时便根据这个体系创造网站的页面,首先,我们先行熟悉 bootstrap
布局之为主特色。

 开始

 让我们从示例中的 jumbotron页面开始。

 在我们和好创办的 study 文件夹着创造名也 3 的文件夹。

  1. 用以此文件夹着的少数独文件复制到 study 中之 3 文件夹着。

  2. 以文本编辑器中打开 index.html 文件。

  3. 用第 10 行的题目修改为

    Layout Playground | My Bootstrap site

  4. 找到第 71 行,将题目修改也

    Layout Playground

  5. 开辟 index.html,你见面看如下的页面

图片 1

 开始

 让咱们打示例中的
jumbotron页面开始。

 在我们协调创立的 study 文件夹着创造名吧 3 的文本夹。

  1. 将这文件夹着的个别只文件复制到 study 中之 3 文件夹着。

  2. 以文本编辑器中打开 index.html 文件。

  3. 以第 10 行的标题修改也

    Layout Playground | My Bootstrap site

  4. 找到第 71 行,将标题修改为

    Layout Playground

  5. 开辟 index.html,你见面视如下的页面

图片 2

什么利用

  1. 找到页面的第 79 行,你见面见到如下的始末

    Heading

    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

    View details »

    Heading

    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

    View details »

    Heading

    Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    View details »

  2. 乃会看到在 class=”row” 的 div 内部,嵌入了三独 class=”col-lg-4” 的
    div。

  3. 以首先单 class=”col-lg-4” 修改也  “col-lg-6”,将第二只跟老三独修改为
    “col-lg-3”
  4. 保存之后,刷新浏览器,你晤面看如下的页面。

图片 3

  1. 咱们当下面加加一个初的分栏。

    Heading

    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

    View details »

    Heading

    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

    View details »

    Heading

    Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    View details »

  2. 封存之后的页面

图片 4

争采取

  1. 找到页面的第 79 行,你晤面看到如下的始末

图片 5😉

<div class="row">
    <div class="col-lg-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
    <div class="col-lg-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
    <div class="col-lg-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
</div>

图片 6😉

  1. 乃会盼在 class=”row” 的 div 内部,嵌入了三单 class=”col-lg-4” 的
    div。 3. 将第一只 class=”col-lg-4” 修改为 
    “col-lg-6”,将第二个和老三个修改也 “col-lg-3” 4.
    保留之后,刷新浏览器,你见面盼如下的页面。

图片 7

  1. 咱俩以脚加加一个初的分栏。

图片 8😉

<div class="row">
    <div class="col-lg-2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
    <div class="col-lg-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
    <div class="col-lg-6">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
</div>

图片 9😉

  1. 保存之后的页面

图片 10

做事原理

Bootstrap 提供了一个 12 列的分栏系统,col-lg- 于 1 直到 12,col-lg-12
表示一切宽度,8 表示三分之二,6 代表一半,class=”row” 的 div
用来作列的器皿,每个行作为一个初的布局区域。详细的求证见:
http://getbootstrap.com/css/\#grid

图片 11

单独采取 .col-md-*
的体,可以当活动设备或者平板设备及创造基本的网格,在小型设备上是积栈式的,在中等设备上以凡横向的。

图片 12

体制的始末如下所示:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

再者支持活动装备与桌面设备

还要使用 .col-xs-* .col-md-* 样式可以取得更好的效果。

图片 13

情节如下所示:

<!-- 移动设备整个宽度,其它一般宽度 -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 移动设备 50% 宽度,其它 33.3% 宽度 -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 移动和桌面都是 50% -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

而且支持活动,平板和桌面

图片 14

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

列定位

使用 .col-md-offset-* 可以开展排定位,比如 .col-md-offset-4
可以稳定到第 4 独职务

图片 15

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

列还得嵌套

图片 16

<div class="row">
  <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row">
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
    </div>
  </div>
</div>

 

 


办事规律

Bootstrap 提供了一个 12 列的分栏系统,col-lg- 从 1 直到 12,col-lg-12
表示一切宽度,8 代表三分之二,6 表示一半,class=”row” 的 div
用来作列的容器,每个行作为一个新的布局区域。详细的求证见:
http://getbootstrap.com/css/#grid

图片 17

独采取 .col-md-*
的体裁,可以在倒装备或者平板设备及创立基本的网格,在小型设备及是积栈式的,在中设备上拿凡横向的。

图片 18

体的情如下所示:

图片 19😉

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

图片 20😉

并且支持活动装备以及桌面设备

而使 .col-xs-* .col-md-* 样式可以取得更好的效果。

图片 21

情节如下所示:

图片 22😉

<!-- 移动设备整个宽度,其它一般宽度 -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 移动设备 50% 宽度,其它 33.3% 宽度 -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 移动和桌面都是 50% -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

图片 23😉

以支持移动,平板和桌面

图片 24

图片 25😉

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

图片 26😉

列定位

使用 .col-md-offset-* 可以进行排列定位,比如 .col-md-offset-4
可以稳定及第 4 独岗位

图片 27

图片 28😉

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

图片 29😉

排还可嵌套

图片 30

图片 31😉

<div class="row">
  <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row">
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
    </div>
  </div>
</div>

图片 32😉

 

相关文章

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图