Bootstrap 小记（1）

1 引入   引入 bootstrap.min.css  和  bootstrap.min.js 和jquery（要比bootstrap.min.js先引入）

2 栅格   

    

    ① 推拉   

<div class="row">
      <div class="col-lg-8 col-lg-push-4 show">8</div>
      <div class="col-lg-4 col-lg-pull-8 show">4</div>
</div>

     ② 偏移

<div class="row">
     <div class="col-lg-4 show">4</div>
     <div class="col-lg-4 col-lg-offset-4 show">4</div>
</div>

     ③ 嵌套

    <div class="row">
        <div class="col-lg-9 show clear">
            <div class="col-lg-3 show">3</div>
            <div class="col-lg-4 show">4</div>
            <div class="col-lg-5 show">5</div>
        </div>
        <div class="col-lg-3 show">3</div>
    </div>

3 样式重写

       引入bootstrap之后，有些样式会重写，例如 h1~h6标签，p标签，body的样式

4 内联文本

    mark: 高亮      del / s : 字中间横线      ins / u：字下面横线       small：字体变小         strong：字体变粗

    text-left / text-center / text-right 文本对齐方式        text-nowrap 不换行  

    text-lowercase  text-uppercase：大小写转换        text-capitalize：首字母转为大写

    abbr：缩略语（要内置title属性）     blockquote：引用（前面有灰色块效果，可内置footer，可添加blockquot-reverse: 文字靠右显示）

   列表 .list-unstyled（清除默认样式）  .list-inline（列表一行显示） 

  描述性列表标签：dl>dt+dd        dl-horizontal：水平排列，拉宽才有效果

5 代码文本

    ① 内联代码   

<p>php文本是用<code>&lt;?php</code>和<code>?&gt;</code>包裹的代码段</p>

    ②  键盘

<p>用户输入按 <kbd>ctrl + s</kbd>保存</p>

    ③ pre 格式化  小于号 <  一定要替换   支持内样式 .pre-scrollable  最大高度为350px 超过就有滚动条

    ④ 变量   var标签 （以斜体显示）

    ⑤ 程序输出标记  samp

6 表格  (表格的样式可以叠加)

.table    基本表格样式

.table-striped    隔行变色

.table-bordered  带边框的表格

.table-hover   鼠标悬停改变颜色

.table-condensed  紧锁表格

active success warning danger info(在行或者表格上增加) ：状态类 增加颜色

.table-responsive       .table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。

7 表单

 ① 垂直表单 

 form-control 控件内样式，用于设置控件显示样式              form-group 表单组内样式，用于打包标签和控件

 legend 表单抬头              fieldset 元素可将表单内的相关元素分组

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <form action="" role="form">
                <fieldset>
                    <legend>用户登入</legend>
                    <div class="form-group">
                        <label for="name">用户名称</label>
                        <input type="text" class="form-control" id="name" placeholder="username">
                        <p class="help-block">可以用手机号或者邮箱登入</p>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="text" class="form-control" id="password" placeholder="Password">
                        <p class="help-block">密码不得少于6位</p>
                    </div>
                </fieldset>
                <button type="submit" name="button" class="btn btn-info btn-block">提交</button>
            </form>
        </div>
    </div>
</div>

 ② 水平表单   （.form-inline）（label标签一定要写，不然屏幕阅读器将无法正确识别。可以用 class = “sr-only” 隐藏label）

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form action="" role="form" class="form-inline">
                <fieldset>
                    <legend>用户登入</legend>
                    <div class="form-group">
                        <label for="name1" class="sr-only">用户名称</label>
                        <input type="text" class="form-control" id="name1" placeholder="username">
                    </div>
                    <div class="form-group">
                        <label for="password1" class="sr-only">密码</label>
                        <input type="text" class="form-control" id="password1" placeholder="Password">
                    </div>
                <button type="submit" name="button" class="btn btn-info">提交</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>

③ 水平表单（删掉行 row 和列 col-lg-md,把form 作为行，label两列，input 10列）

<div class="container">
    <form action="" role="form" class="form-horizontal">
        <fieldset>
            <legend class="text-center">用户登入</legend>
            <div class="form-group">
                <label for="name2" class="col-lg-2 control-label">用户名称</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" id="name2" placeholder="username">
                </div>
            </div>
            <div class="form-group">
                <label for="password2" class="col-lg-2 control-label">密码</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" id="password2" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-10 col-lg-offset-2">
                    <button type="submit" name="button" class="btn btn-info">提交</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

8 按钮

 可以当做按钮的元素 a 和 button ，导航和导航条组件时只能用 button

按钮7个类样式   btn-default  btn-primary btn-success  btn-warning  btn-danger  btn-info btn-link

按钮大小   btn-lg btn-sm btn-xs  btn-block(百分之一百显示)  active disabled

<button class="btn btn-danger disabled" type="button">按钮</button>

9 图片

img-responsive 响应式图片 

三个类样式  圆角： img-rounded   圆：img-circle      缩略图：img-thumbnail

10 注意

textarea标签中间不能留空，否则提示文字显示不出来

<textarea class="form-control" placeholder="留言内容" ></textarea>