【Java Web_06】Bootstrap

① text-left      :     左对齐
② text-center    :     居中
③ text-right     :     右对齐

① text-lowercase    :    转小写
② text-uppercase    :    转大写
③ text-capitalize   :    首字母大写

① list-unstyled      :    取消前置图标，将左边距设置为0
② list-inline        :    取消前置图标，横向排列

① <code></code>       :    内联样式【有底纹】
② <kdb></kdb>         :    用户输入【黑色块】
③ <pre></pre>         :    代码块 【文本框】
④ well                :    代码块 【文本框】

① 前景色(文本颜色)
    * text-muted      :    柔和灰
    * text-success    :    成功绿
    * text-info       :    信息蓝
    * text-primary    :    主要蓝
    * text-warning    :    警告黄
    * text-danger     :    危险红
② 后景色(背景色  部分后景色会修改前景色)
    * bg-success     :    成功绿
    * bg-info        :    信息蓝
    * bg-primary     :    主要蓝
    * bg-warning     :    警告黄
    * bg-danger      :    危险红

① table                :    基本表格样式
② table-striped        :    条纹表格样式
③ teble-bordered       :    带边框表格样式
④ table-hover          :    鼠标悬停激活样式
⑤ 单独指定tr样式
    active        :    激活样式
    success       :    成功绿
    info          :    信息蓝
    warning       :    警告黄
    danger        :    危险红
    sr-only       :    隐藏不显示
⑥ 示例
    <table class="table table-striped table-bordered table-hover">
        <tr class="success">
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr class="info">
            <td>001</td>
            <td>大张伟</td>
            <td>男</td>
        </tr>
        <tr class="warning">
            <td>002</td>
            <td>王大锤</td>
            <td>男</td>
        </tr>
        <tr class="danger">
            <td>003</td>
            <td>牛魔王</td>
            <td>男</td>
        </tr>
        <tr class="sr-only">
            <td>004</td>
            <td>小仙女</td>
            <td>女</td>
        </tr>
        <tr class="active">
            <td>005</td>
            <td>大仙女</td>
            <td>女</td>
        </tr>
    </table>

① 可以添加按钮样式的标签
    * span
    * button
    * input
    * a
    # 推荐 span 因为 span 自身没有样式，不会造成样式叠加
② 样式
    * btn                ：    基本按钮效果
    * btn-default        ：    默认按钮效果
    * btn-primary        ：    主演蓝按钮
    * btn-success        ：    成功绿按钮
    * btn-info           ：    信息蓝按钮
    * btn-warning        ：    警告黄按钮
    * btn-danger         ：    危险红按钮
    * btn-link           ：    超链接按钮
③ 按钮尺寸
    * btn-lg            ：    大按钮
    * btn-sm            ：    小按钮
    * btn-xs            ：    小小按钮
    * btn-block         ：    块按钮(独占一行)
③ 示例    
    <!-- 按钮样式 -->
    <span class="btn">按钮</span>
    <span class="btn btn-default">按钮</span>
    <span class="btn btn-success">按钮</span>
    <span class="btn btn-link">按钮</span>
    
    <!-- 按钮尺寸 -->
    <span class="btn btn-default">按钮</span>
    <span class="btn btn-default btn-lg">按钮</span>
    <span class="btn btn-default btn-block">按钮</span>

* active        ：        激活样式
* disabled      ：        禁用样式

* 示例
    <span class="btn btn-default active"  >按钮</span>
    <span class="btn btn-default disabled">按钮</span>

① 前提
    * 给表单的 input 标签通过 Bootsrapt 修改样式时，input 标签必须指定 type 属性！！！
② block 块样式
    * 独占一行的输入框(可用于 submit 按钮，常见为手机上独占一行的登录按钮)
    * form-control
    * 示例
        <input type="text" name="username" placeholder="请输入用户名" class="form-control"/>
        <input type="password" name="password" placeholder="请输入密码" class="form-control"/>
        <input type="submit" value='登录' class="form-control"/>
③ 响应式：内联输入框
    * 屏幕宽度小于 768px 时，自动切换为适用于手机的输入框效果
    * form-inline        --->        用于 form 标签
    * form-control       --->        用于 input 标签
    * 输入框尺寸
        - input
            input-lg    :    大输入框
            input-sm    :    小输入框
        - 组合输入框
            form-group-lg    ：    大组合输入框
            form-group-sm    ：    小组合输入框
    * 示例
        <form action="#" method="get" class="form-inline">
            <input type="text" name="username" placeholder="请输入用户名" class="form-control"/>
            <input type="password" name="password" placeholder="请输入密码" class="form-control"/> 
            <input type="submit" value='登录' class="form-control"/>
        </form>
④ 组合输入框
    * 使用方法
        - 给 form 标签添加 class="form-group"
        - 给所有输入框添加父级 div 并添加 class="input-group"，此时 div 是组合输入框的容器，将多个组合为一个
        - 给输入框添加一个兄弟(在上的靠前显示) div 并添加 class="input-group-addon" 
    * 示例
        <form action="#" method="get" class="form-control input-group" >
            <div class="input-group">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-user"></span>
                </div>
                <input type="text" name="username" placeholder="请输入账号" class="form-control"/>
            </div>
            <div class="input-group">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-lock"></span>
                </div>
                <input type="password" name="password" placeholder="请输入密码" class="form-control"/>
            </div>
            <div class="input-group">
                <div class="input-group-addon">
                    <sapn class="glyphicon glyphicon-envelope"></sapn>
                </div>
                <input type="email" name="email" placeholder="请输入邮箱" class="form-control"/>
                <div class="input-group-addon">
                    <select>
                        <option>@163.com</option>
                        <option>@sina.com</option>
                        <option>@qq.com</option>
                        <option>@126.com</option>
                    </select>
                </div>
            </div>
            <input type="submit" value="登录"  class="form-control"/>
        </form>
        
    # 补充
        - 给给 form 标签添加 class="form-horizontal" 
        - 在含有 class="form-group" 的 div 中，元素会水平排列
        
       【示例】
        <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>
        </form>
⑤ 输入框校验状态
    * 使用方式
        - 给输入框添加父级 div 并添加 class="xxx"
            has-success        :    输入成功 绿色
            has-warning        ：    输入警告 黄色
            has-error          ：    输入错误 红色
    * 注意
        此功能需要与 JS 联合使用
    * 示例
        <form action="#" method="get" class="form-inline">
            <div class="has-success">
                <input type="text" name="username" placeholder="请输入用户名" class="form-control"/>     <br />
            </div>
        </form>

① 图片尺寸
    * img-responsive        ：    图片在任意尺寸都占100%
*  图片形状
    * img-rounded           ：    方形
    * img-circle            ：    圆形
    * img-thumbnail         ：    相框

* 图标形式的文字，可以修改颜色等属性
* 示例
    <span class="glyphicon glyphicon-user"></span>

* 巨幕中的文本会被放大
* 使用方法
    - 给div标签添加 class = "jumbotron"
* 示例
    <div class="jumbotron">
        <h1>巨幕中的h3标题</h1>
        <p>巨幕中的普通文本内容</p>
    </div>

* BootStrap 将所有屏幕等分为 12 个格子，通过创建 div 指定 class="row" 来实现栅格系统的创建
* 注意
    - 在栅格中，要将内容写到栅格行，一个栅格行中超出部分将自动换行
    - 若屏幕大于设置则延用，若屏幕小于设置则占满整行

① 固定宽度的栅格容器
    * container
② 占用屏幕100%宽度的栅格
    * container-fluid
③ 示例
    <div class="container-fluid" >
    <div class="row">
        <img class="col-lg-6 hidden-xs" src="../resource/img/98.jpg"/>
    </div>
</div>

                (超小屏幕<768px)       (768px<= &小屏幕& <998px)       (998px<= &中等屏幕& <1200px)       (1200px<=大屏幕)
    固定宽度          auto                       750px                           970px                       1170px
    类前缀          col-xs-                    col-sm-                          col-md-                     col-lg-
    
* 示例    
    <div class="container-fluid" >
        <div class="row">
            <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12 hidden-xs" src="../resource/img/1.jpg"/>
            <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12 hidden-xs" src="../resource/img/2.jpg"/>
            <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12 hidden-xs" src="../resource/img/3.jpg"/>
            <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12 hidden-xs" src="../resource/img/4.jpg"/>
            <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12 hidden-xs" src="../resource/img/5.jpg"/>
        </div>
    </div>

* 类前缀-offset-栅格数

* 类前缀-push-栅格数    :    左移
* 类前缀-pull-栅格数    ：    右移
* 注意
    - 移动后元素是会被覆盖的
    - 后面元素覆盖前面的元素

* 每个占有固定格子的元素又可以用来作为一个含有 12 个格的栅格容器
* 示例
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="img/1.jpg">
                <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="img/1.jpg">
                <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="img/1.jpg">
                <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="img/1.jpg">
                <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="img/1.jpg">
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="img/1.jpg">
                <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="img/1.jpg">
                <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="img/1.jpg">
                <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="img/1.jpg">
                <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="img/1.jpg">
            </div>
        </div>
    </div>

* 手机与电脑同一网址为何不同
    - 页面用包含两套 div ，手机和电脑显示不同的 div
 
                   (超小屏幕<768px)      (768px<= &小屏幕& <998px)      (998px<= &中等屏幕& <1200px)      (大屏幕<=1200px)
visible-xs-*            可见                       隐藏                            隐藏                        隐藏
visible-sm-*            隐藏                       可见                            隐藏                        隐藏    
visible-md-*            隐藏                       隐藏                            可见                        隐藏    
visible-lg-*            隐藏                       隐藏                            隐藏                        可见     
hidden-xs               隐藏                       可见                            可见                        可见    
hidden-sm               可见                       隐藏                            可见                        可见    
hidden-md               可见                       可见                            隐藏                        可见    
hidden-lg               可见                       可见                            可见                        隐藏

* 示例
    <img class="hidden-xs" src="img/1.jpg">
    <div class="visible-xs-block">768px 以下无法查看 自行脑补</div>

① 使用方法
    * 在 div 中添加 class="dropdown" 或 class="dropup" 此时 div 是下拉菜单的容器    
    * 在下拉菜单的容器中添加两个子元素
        - 按钮，单击后弹出下拉菜单
        - ul，弹出的菜单
    * 修改按钮
        - 给按钮添加 data-toggle="dropdown"
        - 给按钮添加 span 并指定 class="caret"
    * 修改ul
        - 给 ul 添加 class="dropdown-menu"
        - li 中每个选项都必须被 <a> 包裹
② 示例    
    <div class="dropdown">
        <span data-toggle="dropdown" class="btn btn-success">菜单<span class="caret"></span></span>
        <ul class="dropdown-menu">
            <li><a href="#">CSDN</a></li>
            <li><a href="#">GitHub</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">码云</a></li>
        </ul>
    </div>
③ 下拉菜单样式
    * 菜单在屏幕右侧显示
        - ul 添加 class="dropdown-menu-right"
    * 添加弹出菜单标题
        - ul 内部前置一个 li 并指定 class="dropdown-header"
    * 选项之间添加分割线
        - 选项之间添加 li 并指定 class="divider"，每一个 li 就是一天分割线
    * 设置某项禁用
        - 设置禁用 li 的 class="disabled"
    * 设置菜单为默认显示
        - 在下拉菜单容器添加 class="dropdwon open"

① 按钮组合
    * 使用方法    
        - 写一个普通下拉菜单，仅包含一个箭头
        - 修改下拉菜单太容器的 class="btn-group"
        - 在菜单 ul 前添加一个按钮
    * 示例
        <div class="btn-group">
            <span class="btn btn-success">下载</span>
            <span data-toggle="dropdown" class="btn btn-success"><span class="caret"></span></span>
            <ul class="dropdown-menu">
                <li><a href="#">1号</a></li>
                <li><a href="#">2号</a></li>
                <li><a href="#">3号</a></li>
            </ul>
        </div>
② 输入框组合
    * 使用方法    
        - 写一个普通下拉菜单，仅包含一个箭头
        - 修改下拉菜单太容器的 class="input-group-btn"
        - 给当前下来菜单容器添加父级 div 并指定 class="input-group"
        - 给添加的父级元素添加一个前置的输入框子元素，指定 class="from-control"
    * 示例    
        <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-btn">
                <span data-toggle="dropdown" class="btn btn-success"><span class="caret"></span></span>
                <ul class="dropdown-menu">
                    <li><a href="#">1号</a></li>
                    <li><a href="#">2号</a></li>
                    <li><a href="#">3号</a></li>
                    <li><a href="#">4号</a></li>
                </ul>
            </div>
        </div>

① 基本导航
    * 使用方法
        - 写一个 ul 指定 class="nav"
        - ul 中添加的 li 中包含 <a>
    * 示例    
        <ul class="nav">
            <li><a href="javascript:void(0)">首页</a></li>
            <li><a href="javascript:void(0)">下载</a></li>
            <li><a href="javascript:void(0)">详情</a></li>
        </ul>
② 横向基本导航
    * 使用方法    
        - 写一个 ul 指定 class="nav nav-tabs"
        - ul 中添加的 li 中包含 <a>
    * 示例
        <ul class="nav nav-tabs">
            <li><a href="javascript:void(0)">首页</a></li>
            <li><a href="javascript:void(0)">下载</a></li>
            <li><a href="javascript:void(0)">详情</a></li>
        </ul>
③ 撑满容器的导航
    * 使用方法
        - 写一个 ul 指定 class="nav nav-justified"
        - ul 中添加的 li 中包含 <a> 
    * 示例
        <ul class="nav nav-tabs  nav-justified">
            <li><a href="javascript:void(0)">首页</a></li>
            <li><a href="javascript:void(0)">下载</a></li>
            <li><a href="javascript:void(0)">详情</a></li>
        </ul>
④ 胶囊导航
    * 横向胶囊
        - ul 指定 class="nav-pills"
    * 垂直胶囊
        - ul 指定 class="nav-stacked"

⑤ 在导航中添加下拉菜单
    * 将导航中的某个 li 添加 class="dropdown-menu" 当作下拉菜单的容器
    * 示例
         <ul class="nav nav-tabs">
            <li><a href="javascript:void(0)">首页</a></li>
            <li class="dropdown">
                <a data-toggle="dropdown" href="#">下载&nbsp;&nbsp;<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">1号元素</a></li>
                    <li><a href="#">2号元素</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">详情</a></li>
        </ul>

⑥ 内容切换导航
    * 使用方法    
        - 写一个普通导航
        - 在导航下 添加一个兄弟 div 指定 class="tab-content"
        - 在上述 div 中添加一些子 div ，每个子 div 中写需要被切换的内容
            # 这个 div 必须有id，必须指定 class="tab-pane fade" 默认选中为 class="tab-pane fade in active" 
        - 导航中每个超链接需要添加 data-toggle="tab"
        - 导航中的超链接地址为 #id(id为要切换到的div的id)
        - 给导航中默认的 li 设置 class="active" 需要与默认内容 div 对应。
    * 示例
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#t1">首页</a></li>
            <li><a data-toggle="tab" href="#t2">下载</a></li>
            <li><a data-toggle="tab" href="#t3">详情</a></li>
        </ul>
        <div class="tab-content">
            <div id="t1" class="tab-pane fade in active">
                <div class="jumbotron" style="padding-left:50px">
                    <h1>这是一个网站的首页</h1>
                </div>
            </div>
            <div id="t2" class="tab-pane fade"><img src="images/22.jpg"></div>
            <div id="t3" class="tab-pane fade"><img src="images/23.jpg"></div>
        </div>

⑦ 附加导航
    * 使用方法(通过栅格系统实现左右 2:10分割)
        - 给左侧div添加一个普通垂直导航指定导航 id，并给 ul 添加 tata-spy="affix"
        - 在右侧div中与导航关联的位置添加元素并指定 id
        - 给左侧导航中的超链接指定为 #id(右侧关联位置id)
        - 给body添加 data-spy="scroll" data-target="#左侧导航id"
        - 给默认选中的 li 设置 class="active"
    * 示例
        <body data-spy="scroll" data-target="#d1">
            <div class="container">
                <div class="row">
                    <div class="col-lg-2" id="d1">
                        <ul class="nav nav-stacked" data-spy="affix">
                            <li class="active"><a href="#t1">第一章节</a></li>
                            <li><a href="#t2">第二章节</a></li>
                            <li><a href="#t3">第三章节</a></li>
                            <li><a href="#t4">第四章节</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-10">
                        <h3 id="t1">第一章节</h3>
                        <p>...</p>
                        <h3 id="t2">第二章节</h3>
                        <p>...</p>
                        <h3 id="t3">第三章节</h3>
                        <p>...</p>
                        <h3 id="t4">第四章节</h3>
                        <p>...</p>
                    </div>
                </div>
 
            </div>
        </body>

① 基本导航条
    * 使用方法
        - 写一个 nav 标签，指定 class="navbar navbar-default"
        - 给 nav 标签添加 ul 标签 指定class="nav navbar-nav"
        - 给 ul 添加 li ，li 的内容就 为超链接
    * 示例
        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">图片</a></li>
                <li><a href="#">视频</a></li>
            </ul>
        </nav>
② 给导航条加内容
    * 添加标题
        - nav 标签中前置一个 div 指定 class="navbar-header" div 中添加 span 指定 class="navbar-brand" 内容即标题
        - 示例
            <div class="navbar-header">
                <span class="navbar-brand">JAVA24.COM</span>
            </div>
    * 添加表单
        - 添加一个普通的form表单，指定 class="navbar-form"
        - 将输入框与按钮设置为组合输入框
        - 示例
            <form action="https://www.baidu.com/s" class="navbar-form">
                <div class="input-group">
                    <input type="text" class="form-control" name="wd" placeholder="请输入搜索的内容">
                    <span class="input-group-addon" οnclick="$(this).parent().parent().submit()">搜索</span>
                </div>
            </form>
    * 元素显示
        - navbar-left      ：    居中
        - navbaer-right    ：    居右
    * 添加边距(通过给所有子元素栅格系统)
        - <nav><div class="container">...</div></nav>
    * 添加文字并对其
        - 给文字添加父级元素 span 指定 class="navbar-taxt"
    * 示例
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <span class="navbar-brand">JAVA24.COM</span>
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">图片</a></li>
                    <li><a href="#">视频</a></li>
                </ul>
                <form class="navbar-right" action="https://www.baidu.com/s" class="navbar-form">
                        <div class="input-group">
                            <input type="text" class="form-control" name="wd" placeholder="请输入搜索的内容">
                            <span class="input-group-addon" οnclick="$(this).parent().parent().submit()">搜索</span>
                        </div>
                </form>
            </div>
        </nav>
③ 静态导航条【仅取消了导航条的圆角】
    - 给 nav 添加 class="navbar-static-top"
④ 固定导航条
    - 固定到顶部
        class="navbar-fixed-top"
    - 固定到底部
        class="navbar-fixed-bottom"