Bootstrap基本布局与使用

最新推荐文章于 2024-11-10 15:10:09 发布

chunpushi4856

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量162

点赞数

文章标签： javascript ui ViewUI

原文链接：https://my.oschina.net/u/3888017/blog/1831545

版权

代码的引入：

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap 101 Template</title>
 <link href="css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 	
 <h1>Hello, world!</h1>


 <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>

 </body>
</html>

在以上代码中，是使用BootStrap代码的基本样式

Bootstrap第一步需要引入CSS样式如，

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

第二步：引入JavaScript：

<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
 
<script src="js/bootstrap.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">

上述代码的意思是，默认情况下，UI布局的宽度和移动设备的宽度一致。initial-scale=1确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

布局容器

Bootstrap3 需要一个布局容器来包裹页面内容和栅格系统，系统提供了两个布局容器类，一个是 .container类，另一个是 .container-fluid类。由于padding等原因，这两种容器不能互相嵌套。

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

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

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

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

工作原理:

Bootstrap栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。栅格系统的工作原理如下：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便获得合适的对齐方式（alignment）和内边距（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
内容应当放置在“列”中，并且，只有“列”可以作为行”的直接子元素。
系统预定义了一些栅格类，比如 .row 和 .col-xs-4（超小屏幕下，占 4 列宽度）。可以用这些栅格类来快速创建栅格布局。同时，还提供了强大的mixin，用于生成更具语义的布局。
通过为“列”设置 padding 属性，从而创建列与列之间的间隙。通过为第一个列和最后一个列设置负值 margin 来抵消 padding 的影响。
通过指定1到12的值来表示列跨越的范围。比如，可以使用三个 .col-xs-4 来创建三个等宽的列。
如果一“行”中包含了的“列”大于 12，多余的“列”所在的元素将被作为一个整体另起一行排列。
栅格类应用于屏幕宽度大于或等于分界点大小的设备，即针对小屏幕的栅格类，对大屏幕依然起作用。比如，在一个元素上应用 .col-md-* 栅格类，它不仅会影响中等屏幕，而且如果该元素没有应用任何 .col-lg-* 类，它也会影响大屏幕设备。

布局实例:

<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>

上述代码中，我们仅仅为元素应用了一组 .col-md-* 栅格类，而没有应用任何 .col-xs-*、.col-sm-*、.col-lg-* 类。

<div class="row ">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</div>
  <div class="col-xs-6 col-sm-8 col-md-9 col-lg-10">…</div>
</div>

上述布局为 4 种类型的屏幕都分别定义了各自的栅格类，因此每种屏幕都将拥有自己的布局。最终的布局结果是，在超小屏幕上将使用.col-xs-* 类定义的 6-6 布局，在小屏幕上使用.col-sm-* 类定义的 4-8 布局，在中等屏幕上使用 .col-md-* 类定义的 3-9 布局，在大屏幕上使用 .col-lg-* 类定义的 2-10 布局。

列平移

使用 .col-md-offset-* 类，可以将列向右侧平移，* 指定要平移的列数。平移的本质，是为元素增加 * 列的左外边距（margin-left）。如，.col-md-offset-4 类将 .col-md-4 元素向右侧平移 4个列（column）的宽度，也就是为它增加 4 列的左外边距。如：

<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>

列嵌套：

Bootstrap栅格系统也支持列嵌套，即在一个列中嵌套一个或多个行。被嵌套的行依然遵守最大 12 列的规则，即一行中所包含的总列数不能大于12（当然，也没有要求你必须占满12列），如果大于 12，多余的列所在的元素将被作为一个整体另起一行排列。

以下实例在一个已经存在的 .col-sm-9 元素中，添加一个新的 .row 元素和一系列 .col- * 元素来实现列嵌套：

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
      <div class="col-xs-4 col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
    </div>
  </div>
</div>

转载于:https://my.oschina.net/u/3888017/blog/1831545