Fork me on GitHub

Bootstrap基础

发表于 | 更新于 | 分类于 | 阅读次数：


Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

1.Getting started

  • 使用bootstrap的方式主要有下载源文件和引用cdn的方式。具体参考：

    点击查看bootstrap的使用方式

  • bootstrap.min.css和bootstrap.css在使用上是一样的但是min版时压缩版使用更方便。

  • 这里我们选择使用把css文件下载到本地引入的方法来使用。

    1.1 创建一个html文件并做好使用bootstrap的准备

    创建一个能使用bootstrap的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>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>一只老菜鸡</title>

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

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>Hello, world!</h1>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
    使用bootstrap样式前：

    使用bootstrap样式后：

2.TYPOGRAPHY 排版

2.1 文本基本操作

文本基本操作~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="container"> <!-- container 是bootstrap样式中的容器基本样式 -->
    <h1 class="page-header">Hello, world!
        <small>Secondary text</small>
    </h1>
    <p class="lead">
        Cras mattis
        <mark>consectetur</mark>
        purus
        <del>sit amet</del>
        fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
    </p>
    <p>
        Morbi leo risus, porta <u>ac consectetur ac</u>, vestibulum at eros.
        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
        rutrum faucibus dolor auctor.Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
        scelerisque nisl consectetur
        et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
    </p>
</div>

2.2 ALIGNMENT 对齐 $ TRANSFORMATION 位置变换

ALIGNMENT 对齐 $ TRANSFORMATION 位置变换 ~点击查看完整版代码
1
2
3
4
5
6
<!-- ALIGNMENT 对齐 $ TRANSFORMATION 变换 -->
<p class="text-left text-lowercase">Left aligned</p>       <!-- 文本靠左并转换成小写 -->
<p class="text-center text-uppercase">Center aligned</p>   <!-- 文本居中并转换成大写 -->
<p class="text-right text-capitalize">Right aligned</p>    <!-- 文本靠又并转换成首字母大写 -->
<p class="text-justify">Justified text</p>
<p class="text-nowrap">No Wrap text</p>

2.3 BLOCKQUOTE 块引用

BLOCKQUOTE 块引用 ~点击查看完整版代码
1
2
3
4
<blockquote class="blockquote-reverse">
    <p>我啥也没说过，我真的啥也没说。</p>
    <footer>Quote by <cite title="DP LEE">DP LEE</cite></footer>
</blockquote>

2.4 CODE 引用代码块

CODE 引用代码块 ~点击查看完整版代码
1
2
3
4
5
<code>&lt;h1&gt;Heading Text&lt;/h1&gt;</code>
<br>
To switch directories, type <kbd>cd</kbd>
<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

2.5 文本颜色

文本颜色 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- CONTEXTUAL COLORS 上下文颜色 -->
<p class="text-primary">Hello World</p>
<p class="text-success">Hello World</p>
<p class="text-info">Hello World</p>
<p class="text-warning">Hello World</p>
<p class="text-danger">Hello World</p>
<p class="text-muted">Hello World</p> <!--muted 暗淡的 -->

<!-- CONTEXTUAL BACKGROUND COLORS 上下文背景颜色 -->
<p class="bg-primary">Hello World</p>
<p class="bg-success">Hello World</p>
<p class="bg-info">Hello World</p>
<p class="bg-warning">Hello World</p>
<p class="bg-danger">Hello World</p>
<p class="bg-muted">Hello World</p> <!--muted 暗淡的 -->

2.6 LABELS标签

LABELS标签 ~点击查看完整版代码
1
2
3
4
5
6
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

3.按钮

3.1 基本按钮

基本按钮 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
<button class="btn btn-default">Button</button>
<a href="#" class="btn btn-danger" role="button">Link</a>
<input type="submit" class="btn btn-success" value="Submit">
<br>

<!-- STANDARD BUTTON -->
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-link">Link</button>

3.2 BUTTON SIZE 按钮大小

BUTTON SIZE 按钮大小 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p>
    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
    <button type="button" class="btn btn-primary">Default button</button>
    <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">Small button</button>
    <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
    <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

3.3 BLOCK BUTTON 按钮块

BUTTON SIZE 按钮大小 ~点击查看完整版代码
1
2
3
4
<div style="height: 100px; width: 400px;">
    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</div>

4.FORM 表单

4.1 block表单（一栏一行）

block表单（一栏一行） ~点击查看完整版代码
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
29
<form class="form-group">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="select1">Gender</label>
        <select class="form-control" id="select1">
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

4.2 inline表单（一行可以有多栏）

inline表单（一行可以有多栏） ~点击查看完整版代码
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
29
<form class="form-inline form-group-sm">
    <div class="form-group">
        <label for="exampleInputEmail2">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword2">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="select2">Gender</label>
        <select class="form-control" id="select2">
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleInputFile2">File input</label>
        <input type="file" id="exampleInputFile2">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

5.TABLE 表格

TABLE 表格 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table class="table table-hover table-striped table-bordered table-condensed"> <!--condensed 缩小-->
    <tr>
        <td class="active">First Name</td>
        <td class="success">Last Name</td>
        <td class="warning">Age</td>
    </tr>
    <tr>
        <td>DP</td>
        <td>LEE</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Yanyan</td>
        <td>Liao</td>
        <td>20</td>
    </tr>
    <tr class="danger">
        <td>Yanyan</td>
        <td>Lee</td>
        <td>20</td>
    </tr>
</table>

6.LIST GROUP 列表组

LIST GROUP 列表组 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul class="list-group">
    <li class="list-group-item">Item one</li>
    <li class="list-group-item">Item Two</li>
    <li class="list-group-item">Item Three</li>
    <li class="list-group-item">Item Four</li>
</ul>

<div class="list-group">
    <a href="#" class="list-group-item active">Link one</a>
    <a href="#" class="list-group-item list-group-item-success">Link Tow</a>
    <a href="#" class="list-group-item">Link Four</a>
    <a href="#" class="list-group-item disabled">Link Five</a>
</div>

7.PANELS 面板

PANELS 面板 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Panel content
    </div>
    <div class="panel-footer">Panel Footer</div>
</div>

7.1 WELL （一般也是用作放组件的容器）

WELL ~点击查看完整版代码
1
2
3
4
<!-- WELL -->
<div class="well">Hello World~</div>
<div class="well well-lg">Hello World~</div>
<div class="well well-sm">Hello World~</div>

7.2 ALERTS 警报提示

ALERTS ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
<!-- ALERTS -->
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
            class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

7.3 PROGRESS BAR 进度条

PROGRESS BAR 进度条 ~点击查看完整版代码
1
2
3
4
<!-- PROGRESS BAR -->
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 50%">50%</div>
</div>

7.4 BADGES 徽章

BADGES 徽章 ~点击查看完整版代码
1
2
3
4
5
<!-- BADGES 徽章 -->
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
    Messages <span class="badge">4</span>
</button>

8.IMAGES 图片

IMAGES 图片 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
<!-- IMAGES -->
<div class="container">
    <img class="img-thumbnail" style="width: 250px;height: 200px" alt="oops~"
         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557261857427&di=4d8c09aba323a902728799f165627b6c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F07%2F20161207224851_ZCSfY.jpeg">
    <img class="img-rounded" style="width: 250px;height: 200px" alt="oops~"
         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557261857427&di=4d8c09aba323a902728799f165627b6c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F07%2F20161207224851_ZCSfY.jpeg">
    <img class="img-circle" style="width: 250px;height: 200px" alt="oops~"
         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557261857427&di=4d8c09aba323a902728799f165627b6c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F07%2F20161207224851_ZCSfY.jpeg">
</div>

9.GRID SYSTEM 网格系统

  • 使用bootstrap中的网格系统来布局是一件非常轻松的事情，我们可以不用去考虑屏幕的像素大小div的位置，直接使用网格系统就可以完成div布局还可以适配各种大小的屏幕。
  • bootstrap默认把一行分为12个格子通过对每个div所占格子的数量来确定该div应该占该行的比例大小是多少。

9.1 Offsetting columns 偏移列

Offsetting columns 偏移列 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
<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>

9.2 Nesting columns 嵌套网格

Nesting columns 嵌套网格 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

9.3 Mobile, tablet, desktop 不同屏幕大小适配

  • col-lg-* 大屏幕
  • col-md-* 中等屏幕 例如ipd pro
  • col-sm-* 小屏幕 例如 ipd mini
  • col-xs-* 最小的屏幕 例如各类手机
  • 当格子的个多余12时则每组额外的列将作为一个单元换行
  • 要根据不同的屏幕分配不痛的col占比 当格子凑满满了12格时就会自动换行。
  • 当需要自动换行是应该添加
    防止第二行的内容被第一行挤占变形
    Responsive column resets ~点击查看完整版代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="row">
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

      <!-- Add the extra clearfix for only the required viewport -->
      <div class="clearfix visible-xs-block"></div>

      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>

效果图：

错误示例：

下一篇文章将是运用这篇文章所学到的东西和bootstrap的组件来写一个简单但是很酷的网页。点击下方连接直接跳转

《使用bootstrap3样式制作一个炫酷的网页》

视频教程地址

本文结束啦 感谢您阅读
路漫漫其修远兮 吾将上下而求索