bootstrap（1）基础入门

鹏重名了
2,006 阅读10分钟

1. 基本概念

概念： Bootstrap来自全球最大的微博公司Twitter，于2013年8月发布，是目前很受欢迎的，移动设备优先的，基于CSS3，HTML5和JQUERY的前端框架，Bootstrap最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC端、Pad端以及手机移动端的页面访问。

布局：

<!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">
    <title>Bootstrap 101 Template</title>
    <link href="../../bootstrap337/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<button type="button" class="btn btn-danger">你好，世界！</button>

<script src="../../jquery321/jquery-3.2.1.min.js"></script>
<script src="../../bootstrap337/js/bootstrap.min.js"></script>
</body>
</html>

2. 栅格系统

概念： 栅格系统将屏幕默认分配等宽的12列以便于布局，由容器，行和列组成：

  • 栅格容器：两种不能共存：
    • container：固体容器，宽度为1200px。
    • container-fluid：流体容器，宽度为屏幕的100%。
  • 栅格行：对栅格行添加 .row 可以去掉该行首尾的15px槽宽。
  • 栅格列：具有响应式的，超出12换行，不足12留白：
    • col-xs-n：n表示该列的占比，无响应式，永远横向排列。
    • col-sm-n：n表示该列的占比，屏宽小于768px时，纵向排列。
    • col-md-n：n表示该列的占比，屏宽小于992px时，纵向排列。
    • col-lg-n：n表示该列的占比，屏宽小于1200px时，纵向排列。
  • 栅格嵌套：允许以栅格中的某一列为栅格容器，重新布置一套12列的栅格系统。
  • 栅格偏移：
    • col-md-offset-n：将该列向右偏移n个单位。
  • 栅格交换：
    • col-md-push-n：将该列向右移动n个单位。
    • col-md-pull-n：将该列向左移动n个单位。

基础栅格

    <style type="text/css">
        div {
            border: 2px solid red;
            box-sizing: border-box;
        }

        .row {
            margin-bottom: 10px;
        }
    </style>
    
<section class="container">
    <article class="row">
        <div class="col-md-3">第1列</div>
        <div class="col-md-3">第2列</div>
        <div class="col-md-3">第3列</div>
        <div class="col-md-3">第4列</div>
    </article>

    <!--超出换行-->
    <article class="row">
        <div class="col-md-6">第1列</div>
        <div class="col-md-6">第2列</div>
        <div class="col-md-6">第3列</div>
    </article>

    <!--不足留白-->
    <article class="row">
        <div class="col-md-1">第1列</div>
        <div class="col-md-1">第2列</div>
        <div class="col-md-1">第3列</div>
        <div class="col-md-1">第4列</div>
    </article>
</section>

栅格容器

    <style type="text/css">
        div {
            border: 2px solid red;
            box-sizing: border-box;
        }
    </style>

<section class="container-fluid">
    <article class="row">
        <div class="col-md-1">1</div>
        <div class="col-md-1">2</div>
        <div class="col-md-1">3</div>
        <div class="col-md-1">4</div>
        <div class="col-md-1">5</div>
        <div class="col-md-1">6</div>
        <div class="col-md-1">7</div>
        <div class="col-md-1">8</div>
        <div class="col-md-1">9</div>
        <div class="col-md-1">10</div>
        <div class="col-md-1">11</div>
        <div class="col-md-1">12</div>
    </article>

    <article class="row">
        <div class="col-md-2">1</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">3</div>
        <div class="col-md-2">4</div>
        <div class="col-md-2">5</div>
        <div class="col-md-2">6</div>
    </article>

    <article class="row">
        <div class="col-md-3">1</div>
        <div class="col-md-3">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">4</div>
    </article>

    <article class="row">
        <div class="col-md-4">1</div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </article>

    <article class="row">
        <div class="col-md-6">1</div>
        <div class="col-md-6">2</div>
    </article>

    <article class="row">
        <div class="col-md-12">1</div>
    </article>

    <article class="row">
        <div class="col-md-1">1</div>
        <div class="col-md-3">2</div>
        <div class="col-md-8">3</div>
    </article>

    <article class="row">
        <div class="col-md-2">1</div>
        <div class="col-md-2">2</div>
        <div class="col-md-8">3</div>
    </article>
</section>

栅格列

    <style type="text/css">
        div {
            border: 2px solid red;
            box-sizing: border-box;
        }

        .row {
            margin-bottom: 10px;
        }
    </style>
    
<section class="container">

    <!--xs始终保持横向布局-->
    <article class="row">
        <div class="col-xs-2">xs-01</div>
        <div class="col-xs-2">xs-02</div>
        <div class="col-xs-2">xs-03</div>
        <div class="col-xs-2">xs-04</div>
        <div class="col-xs-2">xs-05</div>
        <div class="col-xs-2">xs-06</div>
    </article>

    <!--sm在768以下纵向布局，768（含768）以上保持横向布局-->
    <article class="row">
        <div class="col-sm-2">sm-01</div>
        <div class="col-sm-2">sm-02</div>
        <div class="col-sm-2">sm-03</div>
        <div class="col-sm-2">sm-04</div>
        <div class="col-sm-2">sm-05</div>
        <div class="col-sm-2">sm-06</div>
    </article>

    <!--md在992以下纵向布局，992（含992）以上保持横向布局-->
    <article class="row">
        <div class="col-md-2">md-01</div>
        <div class="col-md-2">md-02</div>
        <div class="col-md-2">md-03</div>
        <div class="col-md-2">md-04</div>
        <div class="col-md-2">md-05</div>
        <div class="col-md-2">md-06</div>
    </article>

    <!--lg在1200以下纵向布局，1200（含1200）以上保持横向布局-->
    <article class="row">
        <div class="col-lg-2">lg-01</div>
        <div class="col-lg-2">lg-02</div>
        <div class="col-lg-2">lg-03</div>
        <div class="col-lg-2">lg-04</div>
        <div class="col-lg-2">lg-05</div>
        <div class="col-lg-2">lg-06</div>
    </article>
</section>

栅格嵌套

    <style type="text/css">
        div {
            border: 2px solid red;
            box-sizing: border-box;
        }
    </style>
    
<section class="container">
    <article class="row">
        <div class="col-md-3">1</div>
        <div class="col-md-9">
            <article class="row">
                <div class="col-md-4">2-1</div>
                <div class="col-md-4">2-2</div>
                <div class="col-md-4">2-3</div>
            </article>
        </div>
    </article>
</section>

栅格偏移

    <style type="text/css">
        div {
            border: 2px solid red;
            box-sizing: border-box;
        }
    </style>

<section class="container">
    <article class="row">
        <div class="col-md-8">1</div>
        <div class="col-md-2 col-md-offset-2">2</div>
    </article>
</section>

栅格交换


    <style type="text/css">
        div {
            border: 2px solid red;
            box-sizing: border-box;
        }
    </style>
    
<section class="container">
    <article class="row">
        <div class="col-md-3 col-md-push-9">1</div>
        <div class="col-md-9 col-md-pull-3">2</div>
    </article>
</section>

3. 排版

概念： Bootstrap将全局字号设置为14px，行高设置为1.428：

  • <h#> / .h#：标题文字调整了下边距10px：
    • h1到h3调整了上边距20px，配合 <small> / .small 设置65%的灰色副标题。
    • h4到h6调整了上边距10px，配合 <small> / .small 设置75%的灰色副标题。
  • <p>：段落文字调整了上下边距。
    • 添加 .lead：对段落进行强调，调整了文字的下边距和字号。
    • 添加 .text-left/center/right：调整段落对其方式为居左/居中/居右。
    • 添加 .text-nowrap：设置段落不换行。
    • 添加 .text-uppercase/lowercase/capitalize：设置段落文字大写/小写/首字母大写。
  • <mark> / .mark：重点标记标签，调整了内边距和字体颜色。
  • <small> / .small：将文字缩小为标准字号的85%。
  • <address>：地址标签，调整了行高和下边距。
  • <blockquote>：引用标签，调整了内外边距，字号以及添加了灰色的左边框：
    • 添加 .blockquote-reverse 表示反向引用，文字居右，添加灰色边框。
    • 配合 <footer> 或 <small> 设置80%的灰色来源文字。
  • <ol> / <ul>：
    • 添加 .list-unstyled 移除列表直接子元素的默认样式和左外边距。
    • 添加 .list-inline 让列表变为内联块以横向展示，并添加内边距。
    • 利用 .list-group 配合 .list-group-item 实现带边框的列表。

h标签

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
        }
    </style>
    
<section id="h">
    <h1>窗外的麻雀，在电线杆上多嘴</h1>
    <h2>你说这一句，很有夏天的感觉</h2>
    <h3>手中的铅笔，在纸上来来回回</h3>
    <h4>我用几行字</h4>
    <h5>形容你</h5>
    <h6>是我的谁</h6>
    <hr/>

    <div class="h1">秋刀鱼的滋味，猫跟你都想了解</div>
    <div class="h2">初恋的香味就这样被我们寻回</div>
    <div class="h3">那温暖的阳光</div>
    <div class="h4">像刚摘的鲜艳草莓</div>
    <div class="h5">你说你舍不得吃掉</div>
    <div class="h6">这一种感觉</div>
    <hr/>

    <h1>金箍棒<small> 龚琳娜</small></h1>
    <h6>七里香<span class="small"> 周杰伦</span></h6>
</section>

p标签

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
        }
    </style>
    
<section id="p">
    <p class="lead">枯藤老树昏鸦</p>
    <p class="lead">小桥流水人家</p>
    <p>古道西风瘦马</p>
    <p>夕阳西下</p>
    <p>断肠人在天涯</p>
    <hr/>

    <p class="text-left">左边对齐</p>
    <p class="text-right">右边对齐</p>
    <p class="text-center">居中</p>
    <hr/>

    <p style="border: 2px solid blue; width: 10px">
        换行换行换行换行
    </p>

    <p style="border: 2px solid blue; width: 10px" class="text-nowrap">
        不换行不换行不换行
    </p>
    <hr/>

    <p class="text-lowercase">字母小写 Mr.Joe</p>
    <p class="text-uppercase">字母大写 Mr.Joe</p>
    <p class="text-capitalize">首字母大写 mr joe</p>
</section>

mark标签，small标签，address标签，blockquote标签

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
        }
    </style>
    
<section id="mark">
    <mark>荧光标记</mark>
    <span class="mark">荧光标记</span>
</section>

<section id="small">
    <span>我是正常字号</span>
    <span class="small">我变小了</span>
    <small>我也变小了</small>
</section>

<section id="address">
    <address>地址标签</address>
</section>

<section id="blockquote">
    <blockquote>
        <p>引用标签</p>
    </blockquote>
    <hr/>

    <blockquote class="blockquote-reverse">
        <p>引用标签</p>
    </blockquote>
    <hr/>

    <blockquote>
        <p>引用标签中的内容</p>
        <footer>引用来源1</footer>
        <small>引用来源2</small>
    </blockquote>
</section>

ol标签，

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
        }
    </style>
    
<section id="ol">
    <ul class="list-unstyled">
        <li>千里黄云白日曛</li>
        <li>北风吹雁雪纷纷</li>
        <li>莫愁前路无知己</li>
        <li>
            <ol class="list-unstyled">
                <li>天下谁人</li>
                <li>不识君</li>
            </ol>
        </li>
    </ul>
    <hr/>

    <ul class="list-inline">
        <li>中</li>
        <li>国</li>
        <li>人</li>
        <li>民</li>
    </ul>
    <hr/>

    <ul class="list-group" style="width:300px; margin: auto;">
        <li class="list-group-item">朝辞白帝彩云间</li>
        <li class="list-group-item">千里江陵一日还</li>
        <li class="list-group-item">两岸猿声啼不住</li>
        <li class="list-group-item">轻舟已过万重山</li>
    </ul>
</section>

4. 代码

概念：

  • <code>：代码单词标签，调整了内边距，字体，字号90%，白底粉字，圆角等。
  • <kbd>：输入提示标签，调整了内边距，字体，字号90%，黑底白字，圆角等。
  • <pre>：代码区域标签，调整了内外边距，字号13px，行高，灰底黑字，圆角等。
    • 添加 .pre-scrollable 表示设置区域最大高度为 350px，并添加竖直滚动条。
  • <var>：变量标签，设置文本倾斜。
  • <samp>：输出内容标签，设置文本和父元素相同大小，且调整了字体。 布局：
    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
        }
    </style>
    
    
<section id="code">
    <code>public</code>
</section>

<section id="kbd">
    <p>请输入 <kbd>ctrl + c</kbd> 来进行复制</p>
    <p>请输入 <kbd>ctrl + v</kbd> 来进行粘贴</p>
</section>

<section id="pre">

    <pre>
public static void main(String[] args){
    System.out.println("HelloWorld!!!");
}
</pre>

    <pre class="pre-scrollable">
public static void main(String[] args){
    System.out.println("HelloWorld!!!");
}
public static void main(String[] args){
    System.out.println("HelloWorld!!!");
}
public static void main(String[] args){
    System.out.println("HelloWorld!!!");
}
public static void main(String[] args){
    System.out.println("HelloWorld!!!");
}
public static void main(String[] args){
    System.out.println("HelloWorld!!!");
}
public static void main(String[] args){
    System.out.println("HelloWorld!!!");
}
public static void main(String[] args){
    System.out.println("HelloWorld!!!");
}
public static void main(String[] args){
    System.out.println("HelloWorld!!!");
}
</pre>
</section>

<section id="var">
    <p> int <var>money</var> = 100;</p>
</section>

<section id="samp">
    <p><samp>最终结果为100</samp></p>
</section>

5. 表格

概念： table 是表格的基础样式，可以为表格赋予少量的内边距和水平方向的分隔线：

  • 表格：
    • 添加 table-striped 可以为 <tbody> 区域添加隔行换色效果。
    • 添加 table-bordered 可以为 <table>，<td> 和 <th> 添加边框。
    • 添加 table-hover 可以为 <tbody> 区域添加鼠标经过高亮效果。
    • 添加 table-condensed 可以让表格更加紧凑，单元格中的 padding 减半。
    • 添加 table-responsive 可以设置为响应式表格，当屏幕小于768px时添加边框。
  • 单元格：<tr>，<td> 和 <th> 均可以添加以下情景：
    • 添加 active 可以设置成鼠标悬停时的默认颜色。
    • 添加 success/info/warning/danger 可以设置背景色为绿/蓝/黄/红。
    • 添加 sr-only 可以隐藏行或单元格。 布局：
//表格属性自己添加测试
    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
<section id="active">
    <table class="table table-bordered">
        <tr class="active">
            <td>鼠标悬停时的颜色</td>
            <td>鼠标悬停时的颜色</td>
        </tr>
        <tr>
            <td>鼠标悬停时的颜色</td>
            <td class="active">鼠标悬停时的颜色</td>
        </tr>
    </table>
</section>

<section id="color">
    <table class="table">
        <tr class="success">
            <td>成功绿</td>
            <td>成功绿</td>
        </tr>
        <tr>
            <td class="info">信息蓝</td>
            <td class="warning">警告黄</td>
        </tr>
        <tr class="danger">
            <td>危险红</td>
            <td>危险红</td>
        </tr>
    </table>
</section>

<section id="sr-only">
    <table class="table">
        <tr class="sr-only">
            <td>隐藏-td-1</td>
            <td>隐藏-td-2</td>
        </tr>
        <tr>
            <td class="sr-only">隐藏-td-3</td>
            <td>隐藏-td-4</td>
        </tr>
    </table>
</section>

6. 表单

概念： 表单控件的 <label> 建议使用 for 来关联控件ID：

  • 输入控件：支持全部H5支持的type类型：
    • 添加 form-control 可以调整输入控件（包括文本域和下拉菜单）宽度为100%。
    • 添加 input-lg/sm 可以调整控件变为大号/小号尺寸。
    • .input-group 容器配合 input-group-addon/btn 可以对控件组合文字/按钮，支持多组。
  • 单选按钮：多选按钮和单选按钮相同，只需要将 radio 换成 checkbox 即可：
    • 竖直排列：在每个单选按钮外包裹一层 .radio 容器。
    • 水平排列：每个单选按钮的 <label> 添加 radio-inline。
  • 控件组：.form-group 容器可以对 <input> 控件进行分组，组和组之间有一定的间距。
    • 添加 form-group-lg/sm 可以整组控制 <input> 控件的大小。
    • 添加 has-success/error/warning 可以添加校验状态为成功/失败/警告。
  • 反馈图标：针对校验状态为输入控件添加额外的反馈图标：
    • 对控件组添加一种校验状态和 has-feedback 定位。
    • 布局小图标：<span class="glyphicon glyphicon-ok"></span>。
    • 小图标添加 form-control-feedback 寻找 has-feedback 以定位到控件尾部。
  • 内联表单：对表单添加 form-inline 可使表单变为左对齐内联块，但屏幕小于768px时会失效。
  • 水平排列：对表单添加 form-horizontal 并配合栅格系统，可以将 <label> 和控件水平排列：
    • form-group 可以替代栅格系统中 .row 的效果。
    • 对 <label> 添加 control-label 会有更好的效果。

链接： 小图标

类型


<section id="input-type">
    <form action="">
        <input id="input-type-1" type="text" value="text" class="form-control">
        <input id="input-type-2" type="password" value="password" class="form-control">
        <input id="input-type-3" type="datetime-local" value="datetime-local" class="form-control">
        <input id="input-type-4" type="date" value="date" class="form-control">
        <input id="input-type-5" type="month" value="month" class="form-control">
        <input id="input-type-6" type="time" value="time" class="form-control">
        <input id="input-type-7" type="week" value="week" class="form-control">
        <input id="input-type-8" type="number" value="number" class="form-control">
        <input id="input-type-9" type="email" value="email" class="form-control">
        <input id="input-type-10" type="url" value="url" class="form-control">
        <input id="input-type-11" type="search" value="search" class="form-control">
        <input id="input-type-12" type="tel" value="tel" class="form-control">
        <input id="input-type-13" type="color" value="color" class="form-control">
        <select id="input-type-14" class="form-control">
            <option>1111</option>
            <option>2222</option>
            <option>3333</option>
        </select>
        <textarea id="input-type-15" class="form-control">444</textarea>

        <label hidden="hidden" for="input-type-1"></label>
        <label hidden="hidden" for="input-type-2"></label>
        <label hidden="hidden" for="input-type-3"></label>
        <label hidden="hidden" for="input-type-4"></label>
        <label hidden="hidden" for="input-type-5"></label>
        <label hidden="hidden" for="input-type-6"></label>
        <label hidden="hidden" for="input-type-7"></label>
        <label hidden="hidden" for="input-type-8"></label>
        <label hidden="hidden" for="input-type-9"></label>
        <label hidden="hidden" for="input-type-10"></label>
        <label hidden="hidden" for="input-type-11"></label>
        <label hidden="hidden" for="input-type-12"></label>
        <label hidden="hidden" for="input-type-13"></label>
        <label hidden="hidden" for="input-type-14"></label>
        <label hidden="hidden" for="input-type-15"></label>
    </form>
</section>

size,group,checkbox,checkbox-inline

<section id="input-size">
    <form action="">
        <input id="input-size-1" value="normal" class="form-control"><br/>
        <input id="input-size-2" value="sm" class="form-control input-sm"><br/>
        <input id="input-size-3" value="lg" class="form-control input-lg">

        <label hidden="hidden" for="input-size-1"></label>
        <label hidden="hidden" for="input-size-2"></label>
        <label hidden="hidden" for="input-size-3"></label>
    </form>
</section>

<section id="input-group">
    <form action="">
        <div class="input-group">
            <span class="input-group-addon">￥</span>
            <input id="input-group-1" class="form-control"/>
            <span class="input-group-addon">.00 元</span>
        </div>
        <div class="input-group">
            <input id="input-group-2" class="form-control"/>
            <span class="input-group-btn">
                <!--.input-group-btn类不要直接放在按钮上-->
                <button type="button" class="btn btn-success">按钮1</button>
                <button type="button" class="btn btn-success">按钮2</button>
            </span>
        </div>
        <label hidden="hidden" for="input-group-1"></label>
        <label hidden="hidden" for="input-group-2"></label>
    </form>
</section>

<section id="input-checkbox">
    <form action="">
        <div class="checkbox">
            <label class="checkbox">
                <input type="checkbox"/>
                <span>音乐</span>
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"/>
                <span>魔术</span>
            </label>
        </div>
    </form>
</section>

<section id="input-checkbox-inline">
    <form action="">
        <label class="checkbox-inline">
            <input type="checkbox">
            <span>音乐</span>
        </label>
        <label class="checkbox-inline">
            <input type="checkbox">
            <span>音乐</span>
        </label>
    </form>
</section>

控件组

<section id="form-group">
    <form action="">
        <div class="form-group form-group-lg">
            <input id="lg-001" value="lg-001" class="form-control"/>
            <input id="lg-002" value="lg-002" class="form-control"/>
        </div>
        <div class="form-group  form-group-sm">
            <input id="sm-001" value="sm-001" class="form-control"/>
            <input id="sm-002" value="sm-002" class="form-control"/>
            <input id="sm-003" value="sm-003" class="form-control"/>
        </div>
        <label hidden="hidden" for="lg-001"></label>
        <label hidden="hidden" for="lg-002"></label>
        <label hidden="hidden" for="sm-001"></label>
        <label hidden="hidden" for="sm-002"></label>
        <label hidden="hidden" for="sm-003"></label>
    </form>
</section>

反馈图标

<section id="check-status">
    <form action="">
        <div class="form-group has-success">
            <input id="check-status-1" class="form-control"/>
        </div>
        <div class="form-group has-warning">
            <input id="check-status-2" class="form-control"/>
        </div>
        <div class="form-group has-error">
            <input id="check-status-3" class="form-control"/>
        </div>

        <label hidden="hidden" for="check-status-1"></label>
        <label hidden="hidden" for="check-status-2"></label>
        <label hidden="hidden" for="check-status-3"></label>
    </form>
</section>

<section id="feedback-check">
    <form action="">
        <div class="form-group has-success has-feedback">
            <input id="feedback-check-1" type="text" class="form-control"/>
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        <div class="form-group has-error has-feedback">
            <input id="feedback-check-2" type="text" class="form-control"/>
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <div class="form-group has-warning has-feedback">
            <input id="feedback-check-3" type="text" class="form-control"/>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <label hidden="hidden" for="feedback-check-1"></label>
        <label hidden="hidden" for="feedback-check-2"></label>
        <label hidden="hidden" for="feedback-check-3"></label>
    </form>
</section>

内联表单 水平排列

<section id="form-inline">
    <form class="form-inline">
        <div class="form-group">
            <label for="form-inline-1">Name</label>
            <input id="form-inline-1" type="text" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="form-inline-2">Email</label>
            <input id="form-inline-2" type="email" class="form-control"/>
        </div>
    </form>
</section>

<section id="form-horizontal">
    <form class="form-horizontal">
        <div class="form-group">
            <label for="form-horizontal-1" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-11">
                <input id="form-horizontal-1" type="email" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label for="form-horizontal-2" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input id="form-horizontal-2" type="email" class="form-control"/>
            </div>
        </div>
    </form>
</section>

7. 按钮

概念： 按钮共有三种布局方式，但BootStrap建议使用 <button> 方式：

  • btn btn-default/link：默认白/链接。
  • btn btn-success/info/primary/warning/danger：设置按钮颜色绿/蓝/深蓝/黄/红。
  • btn btn-xs/sm/ml/lg/block：设置按钮为超小号/小号/正常/大号/区块。
  • btn btn-active：激活按钮，激活时底色更深、边框颜色更深、向内投影等。
  • btn btn-disabled：禁用按钮，禁用时鼠标经过会出现禁止图标。

布局：


<input type="button" value="input按钮" class="btn"/>
<button type="button" class="btn">button按钮</button>
<a href="javascript:" class="btn" role="button">a按钮</a>
<hr/>

<button class="btn btn-default">默认白</button>
<button class="btn btn-link">链接</button>
<hr/>

<button class="btn btn-success">成功绿</button>
<button class="btn btn-info">信息蓝</button>
<button class="btn btn-primary">首选深蓝</button>
<button class="btn btn-warning">警告黄</button>
<button class="btn btn-danger">危险红</button>
<hr/>

<button class="btn btn-info btn-xs">超小号</button>
<button class="btn btn-info btn-sm">小号</button>
<button class="btn btn-info btn-ml">正常</button>
<button class="btn btn-info btn-lg">大号</button>
<button class="btn btn-info btn-block">块级</button>
<hr/>

<button class="btn btn-info active">按钮被激活</button>
<button class="btn btn-info disabled" onclick="alert('test')">按钮被禁用</button>

8. 图片

概念： Bootstrap对图片有三种预设的样式：

  • 添加 img-circle/rounded/thumbnail 可以设置图片样式为圆裁，圆角和响应式缩略图。
  • 添加 img-responsive 可以让图片支持响应式布局，随着父元素的缩放而缩放。
  • 添加 center-block 可以让图片居中。
    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }

        img {
            width: 500px;
            height: 500px;
            border: 1px solid green;
        }
    </style>
    
    
<section id="circle">
    <img src="../../image/img-test.jpg" class="img-circle" alt="">
</section>
<section id="rounded">
    <img src="../../image/img-test.jpg" class="img-rounded" alt="">
</section>
<section id="thumbnail">
    <img src="../../image/img-test.jpg" class="img-thumbnail" alt="">
</section>
<section id="responsive">
    <img src="../../image/img-test.jpg" class="img-circle img-responsive" alt="">
</section>

9. 辅助类

概念： 以下类用于辅助修饰文本：

  • text-muted/success/info/primary/warning/danger：前景色灰/绿/蓝/深蓝/黄/红。
  • bg-success/info/primary/warning/danger：背景色绿/蓝/深蓝/黄/红。
  • close：关闭符号，一个象征关闭的图标，可以让模态框和警告框消失。
  • caret：三角符号，负责指示某个元素具有下拉或上拉菜单的功能。
  • pull-left/right：快速设置元素左/右浮动，额外添加了 !important 效果。
  • clearfix：快速设置元素清除浮动，将该元素阻隔在浮动元素中间以产生效果。
  • center-block：设置元素为区块并自居中。
  • show/hidden：设置元素 display 样式以显示区块或隐藏。
  • visible-xs-*：设置元素 display 样式为区块，内联或内联块：
    • visible-xs-block：当屏宽小于768px时显示为区块。
    • visible-sm-block：当屏宽在 [768px, 992px) 时显示为区块。
    • visible-md-inline：当屏宽在 [992px, 1200px) 时显示为内联。
    • visible-lg-inline-block：当屏宽大于1200px时显示为内联块。
  • hidden-md：设置元素 display="none" 以隐藏元素：
    • hidden-xs：当屏宽小于768px时隐藏。
    • hidden-sm：当屏宽在 [768px, 992px) 时隐藏。
    • hidden-md：当屏宽在 [992px, 1200px) 时隐藏。
    • hidden-lg：当屏宽大于1200px时隐藏。

前景色背景色

<section id="color">
    <p class="text-muted">前景色-柔和灰</p>
    <p class="text-success">前景色-成功绿</p>
    <p class="text-info">前景色-信息蓝</p>
    <p class="text-primary">前景色-主要蓝</p>
    <p class="text-warning">前景色-警告黄</p>
    <p class="text-danger">前景色-危险红</p>
</section>

<section id="background-color">
    <p class="bg-success">背景色-成功绿</p>
    <p class="bg-info">背景色-信息蓝</p>
    <p class="bg-primary">背景色-主要蓝</p>
    <p class="bg-warning">背景色-警告黄</p>
    <p class="bg-danger">背景色-危险红</p>
</section>

符号+浮动

<section id="close" style="width: 100px;height: 50px; outline: 1px solid red;">
    <button type="button" class="close">&times;</button>
</section>

<section id="caret">
    <button type="button">
        <span>商品列表</span>
        <span class="caret"></span>
    </button>
</section>

<section id="float" style="height: 100px;">
    <div class="pull-left bg-info" style="width: 20px; height: 20px;">左</div>
    <div class="pull-right bg-success" style="width: 20px; height: 20px;">右</div>
    <div class="clearfix"></div>
    <div class="bg-warning" style="height: 20px;">清除浮动</div>
</section>

居中，隐藏，手机-台式机效果

<section id="center-block">
    <div class="center-block bg-info" style="width: 40px;">居中</div>
</section>

<section id="show-hidden">
    <span class="show bg-info" style="width: 100px;">显示为区块</span>
    <span class="hidden">隐藏</span>
</section>

<section id="response-visible">
    <div class="visible-xs-block">只有手机能看见我</div>
    <div class="visible-sm-inline">只有平板能看见我</div>
    <div class="visible-md-inline-block">只有笔记本能看见我</div>
    <div class="visible-lg-block">只有台式机能看见我</div>

    <div class="hidden-xs">手机看不见我</div>
    <div class="hidden-sm">平板看不见我</div>
    <div class="hidden-md">笔记本看不见我</div>
    <div class="hidden-lg">台式机看不见我</div>
</section>

avatar
文章
阅读
粉丝