bootstrap

- 注意引入顺序
    
    - 由于 旧版的bootstrap高度依赖 jQuery

    - 先引入 jQuery.js,再引入 bootstrap.js

bootstrap 前言

- 本质: bootstrap是别人已经写好得前端样式(css)和逻辑文件(js)
  如果重头开始自己写,会花费很多时间
  
- 所以直接从bootstrap官网下载他们已经写好的css和js代码，引入你的html页面
  直接在标签元素上写上bootstrap规定的class类名，就可以在浏览器上看到别人给你写好的精美样式。

移动设备优先

  • 为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签

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

  • 禁用"缩放功能": user-scalable=no

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

排版与链接

  • 当我们引入了bootstrap,就有了全局的基本样式
- 为 body 元素设置 background-color: #fff

- 使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数

- 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

- 这些样式都能在 scaffolding.less 文件中找到对应的源码

布局容器 class="container"

  • 供了两个作此用处的类.注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套

  • ".container" 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>
  • ".container-fluid" 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
  ...
</div>

排版,请看示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <title></title>
</head>
<body>
    <div class="container">
        <h1>xxx</h1>
        <h2>xxx</h2>
        <h3>xxx</h3>
        <!--samll:实质就是'line-height,font-size调小一点'-->
        <h4>xxx <small>yyy</small></h4>
        <!--abbr: 用来显示缩略词,那么如何显示完整的词汇呢?通过 title属性搞定-->
        <p>xxxxxxxxxxxx The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.</p>
        <!--mark有'添加背景色的效果'-->
        <p>欢迎来到 <mark>xxxxxxxxx</mark></p>
    </div>
    
    <!--
        - 文本的居中/左/右
        
        - 文本的大小写
    -->
    <div class="container">
        <p class="text-left">11111</p>
        <p class="text-center">11111</p>
        <p class="text-right">11111</p>
        <p class="text-uppercase">xxxx</p>
        <p class="text-lowercase">yyyyyy</p>
        <p class="text-capitalize">hhhhh</p>
    </div>
    
    <div class="container">
        <!--删除列表样式-->
        <ul class="list-unstyled">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</body>
</html>

栅格系统(页面布局专用)

  • 定义: 随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

  • 功能: 通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

  • 注意事项: 行（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中,所有“列（column）必须放在 ” .row 内

  • 实例1:class="row"最多只能创建12列,多了就往下面挤

<head>
    ......
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    ......
</head>
<body>
    <div class="container">
        <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> <!--到这边总共12列-->
            <div class="col-md-1">col-md-1</div> <!--这列被挤到下面了-->
        </div>
    </div>
    
</body>
  • 综合实例
<!DOCTYPE html>
<html lang="zh">
<head>
    ......
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <style type="text/css">
        .row { /*给每个col块加一点样式*/
            margin-top: 10px;
            margin-bottom: 0;
        }
        [class*="col-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: rgba(86,61,124,.15);
            border: 1px solid rgba(86,61,124,.2);
        }
    </style>
</head>
<body>
    <div class="container">
        

        <div class="row">
            <!--占3列的空间-->
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <!--超出的内容,会自动变胖,实现自适应-->
            <div class="col-md-3">col-md-3xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
        </div>
        
        <div class="row">
            <!--占4列的空间,但是往左偏移了1个列的空间-->
            <div class="col-md-4 col-md-offset-1">col-md-4</div>
        </div>
        
        <!--row之间支持'嵌套'-->
        <div class="row">
                one
                <!--div first占8列空间(在左边),div two占4列空间(在右边)-->
                <div class="row">
                    <div class="col-xs-8">
                        first
                    </div>
                    <div class="col-xs-4">
                        two
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    
</body>
</html>
  • 实例:把两个列的位置互换
<!--最开始是这样,一个占9列位置,另外一个占3列位置-->
<div class="container">
    <div class="row">
        <div class="col-md-9">col-md-9</div>
        <div class="col-md-3">col-md-3</div>
    </div>
</div>

<!--实现位置互换-->
<div class="container">
    <div class="row">   <!--一个是"push",另外一个是"pull"-->
        <div class="col-md-9 col-md-push-3">col-md-9</div>
        <div class="col-md-3 col-md-pull-9">col-md-3</div>
    </div>
</div>

bootstrap 代码块(没什么好看的...)

  • code

  • kbd

  • pre

  • var

  • samp

......
<div class="container">
    For example <code>&lt;section&gt;</code> as inline;
    我希望现在能键入<kbd>cmd</kbd>命令
    <pre>Sample text here...</pre>
    <var>x</var> = <va>y</va>+<var>z</var> <br> <!--斜体效果-->
    <samp>hello world</samp> <!--斜体效果-->
</div>
......

表格

  • 最简洁的bootstrap表格结构(就两个样式,.container和.table)
- div .container容器

    - .table

        - thead

            - tr

                - th*3

        - tbody

            - tr

                - td*3

......
<div class="container">
    <table class="table">
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
        </tbody>
    </table>
</div>
......
  • 常见的表格样式
- <table class='xxx'>

    - table-striped: 行与行之间,有'一明一暗'的效果

    - table-bordered: 表格有了'边框'

    - table-hover: 鼠标移过去,该行就被'点亮'(标题行不会有该效果)

    - table-condensed: 使表格结构看上去更为'紧密'(表格宽/高度,行宽/高度变小)
  • 常见的'行'样式
- 行的样式:<tr class='xxx'>

    - .active: 被选中的效果

    - .success: 浅绿色效果

    - .info: 浅蓝色效果

    - .warning: 浅黄色效果

    - .danger: 浅红色效果

- 响应式表格样式 table-responsive
......
<div class="table-responsive">
        <table class="table table-bordered">
......
  • 完整代码实例
......
<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr class="active">
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
            </tr>
        </thead>
        <tbody>
            <tr class="success">
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
            <tr class="info">
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
            <tr class="warning">
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
            <tr class="danger">
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
        </tbody>
    </table>
</div>
......

表单

  • 表单控件会被自动赋予一些全局样式
# input,textarea,select
class="form-control" # 该控件的宽度就被设置成 100%

  • 尽量与 label 元素搭配使用,并包裹在 class="form-group",示例

    • 若想隐藏标签元素,可以设置 label class="sr-only"
      <label for="exampleInputEmail1" class="sr-only">Email address</label>
<form action="">
    <!-- form-group,label,form-control -->
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

  • 为

    元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件

    • 此时,控件的宽度不再试是 100%,而是被设置成 auto,因此，多个控件可以排列在同一行
# 控件 A,B,C会呈现水平排列
<form class="form-inline">
    控件A
    控件B
    控件C
</form>

  • 水平排列的表单(控件之间垂直排列)

    • 表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组 垂直并排布局

    • 这样做将改变 class="form-group" 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了

......
<form class="form-horizontal">
  <div class="form-group">
    <!--配合栅格化布局使用-->
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
......

多选和单选框

  • 多选框（checkbox）用于选择列表中的一个或多个选项

  • 而单选框（radio）用于从多个选项中只选择一个

<!--使用 div.checkbox 和 label 包裹起来-->
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that......
  </label>
</div>

<!-- div.disabled 效果:即使鼠标移动到文本,依然有'禁用'标识,如果不加 disabled,只有多选框有'禁用'标识 -->
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>
  • 单选框的demo,和多选框效果类似
<div class="radio">
  <label><!--checked默认被选中-->
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

<div class="radio">
  <label><!--没有 checked-->
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

<!--禁用效果-->
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

  • 让多选框/单选框 排列在一行

    • .checkbox-inline

    • .radio-inline

<!--.checkbox-inline-->
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>


<!--.radio-inline-->
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>

下拉列表: select

  • 很多原生选择菜单"圆角"是无法通过修改 border-radius 属性来改变的
<!--下拉框宽度太长,可以手动设置 width:auto 来调整-->
<!-- select class="form-control" multiple 渲染成'多选'-->
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

静态控件

  • 如果需要在表单中将"一行纯文本"和 label 元素放置于同一行，为

    元素添加 .form-control-static 类

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <!--添加样式-->
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

......
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <!--添加样式-->
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

禁用状态

  • 输入框设置 disabled 属性可以禁止其与用户有任何交互

  • 为

    设置 disabled 属性,可以禁用
    中包含的所有控件

    • 存在浏览器的兼容性问题,官方建议使用js来解决
<form>
  <!--添加之处-->
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
  • 只读状态: readonly属性(禁止输入)
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

校验状态三种样式:

  • 对父元素应用以下样式即可出效果

    • ".has-warning"

    • ".has-error"

    • ".has-success"

    • 其中,子元素包含 ".control-label"、".form-contro"l 和 ".help-block"都将受到影响

<!--应用样式-->
<div class="form-group has-success">
                <!-- 子元素包含control-label 因此受影响-->
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>

<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>

<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>

<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>

<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

为输入框添加额外的图标

  • 设置相应的 .has-feedback类 并添加正确的图标样式即可

  • 注意事项: 反馈图标（feedback icon）只能使用在文本输入框 "" 元素上

......
<body>                                  <!--添加样式之处-->
    <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
                    <!--添加'打钩'样式图标-->
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess2Status" class="sr-only">(success)</span>
    </div>
    
    <div class="form-group has-warning has-feedback">
      <label class="control-label" for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
                    <!--添加'警告'样式图标-->
      <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
      <span id="inputWarning2Status" class="sr-only">(warning)</span>
    </div>
    
    <div class="form-group has-error has-feedback">
      <label class="control-label" for="inputError2">Input with error</label>
      <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
                    <!--添加'打叉'样式图标-->
      <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
      <span id="inputError2Status" class="sr-only">(error)</span>
    </div>
    
    <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
      <div class="input-group">
        <!--自定义'@',背景色绿色-->
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
      </div>        <!--添加'打钩'样式图标-->
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
    </div>
</body>

控件尺寸,即宽度和高度设置

  • 设置高度: ".input-lg 类"

  • 设置宽度: ".col-lg-* 类"

<!--以下效果: 宽度都一样,高度却不一样-->

<input class="form-control input-lg" type="text" placeholder=".input-lg"> <!--最高-->
<input class="form-control" type="text" placeholder="Default input"> <!--中等高-->
<input class="form-control input-sm" type="text" placeholder=".input-sm">  <!--最矮-->

<select class="form-control input-lg">...</select> <!--效果同上-->
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

水平排列的表单组的尺寸

  • 通过添加 ".form-group-lg 类(比较高)" 或 ".form-group-sm 类(相对高度低)"
    为 ".form-horizontal 类" 包裹的 label 元素和表单控件快速设置尺寸
<form class="form-horizontal">

  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>

  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>

</form>

控制宽度

  • 用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度
<div class="row">

  <div class="col-xs-2"> <!--宽度最小-->
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>

  <div class="col-xs-3"> <!--宽度适中-->
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>

  <div class="col-xs-4"> <!--宽度最长-->
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>

</div>

按钮

  • 以下三个元素支持按钮样式
- a

- button(推荐使用这个元素)

- input 

    - type="submit"
    - type="button"


<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">