boostrap学习(1)

发表于 | 分类于

boostrap的基本使用

boostrap网页的基本使用html如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

boostrap使用到的某些html和css属性需要将页面设置为html5的文档类型，
所以需添加如下代码

1
2
3
4
<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

移动设备优先
确保适当的绘制和触屏缩放，需要在中添加viewport元数据标签

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

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

布局容器

boostrap需要为页面内容和栅格系统包裹一个.container容器，为此，我们提供了2个作用于此处的类，注意，由于padding等属性的原因，这两种容器不能互相的嵌套。
.container类用于固定宽度并且支持响应式布局的容器

1
2
3
<div class="container">
  ...
</div>

.container-fluid类用于100%宽度，占据全部视口(viewport)的容器

1
2
3
<div class="container-fluid">
  ...
</div>

栅格系统

提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会最多分配为12列。
栅格同通过一系列的行(row)和列(column)来创建页面布局，你的内容会放入这些创建好的布局里。
1.行(row)必须包含在.container(固定宽度)或(.container-fluid)中
2.通过“行（row）”在水平方向创建一组“列（column）”。
3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
col-xs,col-sm,col-md和col-lg的定义如下。

表格

col-xs col-sm col-md col-lg
超小屏幕手机(<768px) 小屏幕平板(>=768px) 中等屏幕桌面显示器(>=992px) 大屏幕大桌面显示器(>=1200px)

注意：当屏幕宽度在某一个宽度值以内的时候，某个class属性会起作用，而其余的则会失效
例子
.c0l-xs-　　无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
.col-sm-　　屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
.col-md-　　屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
.col-lg-　　屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

由于没有定义lg属性，因此在大于992px的时候，容器会水平排列，按照栅格系统的分列，而在小于992px的时候，则会排列成竖直型

1
2
3
4
5
6
7
<div class="row">
     <div class="col-sm-3 col-xs-12">1</div>
     <div class="col-sm-3 col-xs-12">2</div>
     <div class="col-sm-3 col-xs-12">3</div>
     <div class="col-sm-3 col-xs-12">4</div>

 </div>

如上所示，在大于768px的时候，是水平排列的，在小于768px的时候，则会竖直排列。

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
　　<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-md-4">.col-xs-6 .col-md-4</div>
　　</div>
　　<div class="row">
　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
　　</div>
</div>

屏幕大于992px的时，col-md-8和col-md4还处于作用范围内。
屏幕在769px~992px时，col-md失效,col-sm还处于作用范围内。
屏幕小于768px的时候，col-sm失效，col-xs还处于作用范围内。