Bootstrap笔记

一、栅格系统

1、移动设备中缩放功能

添加缩放功能  <meta name="viewport" content="width=device-width, initial-scale=1">

去除缩放功能  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2、栅格系统设置

-栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局,

-行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3  col-lg-3">第一列占4个格栅</div>
        <div class="col-sm-6 col-md-3  col-lg-3">第二列占4个格栅</div>
        <div class="col-sm-6 col-md-3  col-lg-3">第三列占4个格栅</div>
        <div class="col-sm-6 col-md-3  col-lg-3">第四列占4个格栅</div>
    </div>
</div>

清除浮动：

<div class="clearfix visible-xs"></div>  添加div 在div中设置在哪种分辨率下添加清除浮动

3、媒体查询

    /* 超小屏幕（手机，小于 768px） */
    @media (max-width: 768px){ div{}}
    /* 小屏幕（平板，大于等于 768px） */
    @media (min-width: 768px) { div{ }}
​
    /* 中等屏幕（桌面显示器，大于等于 992px） */
    @media (min-width: 992px) { div{ }}
​
    /* 大屏幕（大桌面显示器，大于等于 1200px） */
    @media (min-width: 1200px) { div{}}

4、响应式图片设置

```html

给图片添加响应式显示 添加 .img-responsive 类 <img src=”” class=”img-responsive” > “`

二、排版

1、页面主题

<p class="lead text-left/right/center">
随便写点...             
</p>
注释：lead 强调
     text-left  左对齐
     text-right 右对齐
     text-right 居中对齐

2、文本显示

<small>变小</small>
<strong>加粗强调</strong>
<b>加粗强调</b>
<em>斜体强调</em>
<cite>斜体变大</cite>

3、缩略语

<abbr title="鼠标移入显示我" class="initialism">过来呀bootstrap</abbr>  
                                  initialism转为大写字母

4、引用

<blockquote>
    <p>
        在引用的文字旁边加一条大大的竖线，强调一下是引用来的。
    </p>
</blockquote>

三、列表与代码

1、清除默认圆点 .list-unstyle

<ul>
    <ol class="list-unstyle"></ol>
</ul>

2、列表水平排列 .list-inline

<ul class="list-inline">
    <li><a href="#">中国</a></li>
    <li><a href="#">俄罗斯</a></li>
</ul>

3、dl列表水平排列 .dl-horizontal

<dl class="dl-horizontal">
    <dt>java</dt>
    <dd>java是一门面向对象的语言。</dd>
</dl>

4、代码输入 <code></code> 标签

<code>
    public static void sting[]
</code>

5、黑色背景模拟按键 代码片段输入 <kbd></kbd>

<kbd>
    alt+f;
</kbd>

6、格式化代码片段输入

<pre>
    public class hello
    {
        public static void main(sting args[])
        {
            System.out.printlen("hello world!") 
        }
    }
</pre>

7、斜体显示代码

<var>斜体显示</var>

8、程序结果

<samp>"hello wrold"</samp>

四、表格样式（无全局样式）

1、基础样式 .table

<table class="table">
    <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
</table>

2、带背景条纹表格 .table-striped

<table class="table table-striped">
    <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
</table>

3、带边框 .table-border

<table class="table table-borderde">
    <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
</table>

4、悬停 .table-hover

<table class="table table-hover">
    <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
</table>

5、紧凑 .table-condensed

<table class="table table-condensed">
    <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
    <tr><td>1</td><td>张三</td><td>22</td></tr>
</table>

6、行样式 .active.success.info

<table class="table table-condensed">
    <tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
    <tr class="success"><td>1</td><td>张三</td><td>22</td></tr>
    <tr class="warning"><td>1</td><td>张三</td><td>22</td></tr>
    <tr class="danger"><td>1</td><td>张三</td><td>22</td></tr>
    <tr class="active"><td>1</td><td>张三</td><td>22</td></tr>
</table>

7、响应式表格 .table-responsive

注：需要在表格外面加一层div，在div中添加class类

<div class="table-responsive">
    <table class="table table-condensed">
        <tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
        <tr class="success"><td>1</td><td>张三</td><td>22</td></tr>
        <tr class="warning"><td>1</td><td>张三</td><td>22</td></tr>
        <tr class="danger"><td>1</td><td>张三</td><td>22</td></tr>
        <tr class="active"><td>1</td><td>张三</td><td>22</td></tr>
    </table>
</div>

五、表单样式

1、基础表单 .form-group .form-control .btn-default

<form >
                    <fieldset>这个标签用于整理所有元素~~~~~~~~~~~~~~
                        <legend>用户登录</legend>表单头部加上这个标签挺好看的~~~~~~~~~~~~~~
                        <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="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