就业班_JavaEE_day06_bootstrap

    响应式页面开发即能针对不同的屏幕进行适配 ，依赖于jquery
一 环境准备
    <link rel="stylesheet" href="css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    添加meta
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
二全局CSS
        1 栅格系统
            栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中
            栅格系统的工作原理：
            A 行row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
            B 通过行（row）在水平方向创建一组列（column）。
            C 内容应当放置于“列（column）”内
            D 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局
            E 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。
            F 通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
            G 每行最多有12列。
            F .col-md-offset-* 类可以将列向右侧偏移
            col-xs-n 表示手机
            col-sm-n 表示平板
            col-md-n 表示中等屏幕pc
            col-lg-n   表示大屏幕pc
            嵌套列
            为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
            
        2 表格
            A 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线
            B  通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
            响应式表格
            将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格
            eg:
            <div class="table-responsive">
                  <table class="table">
                    ...
                  </table>
            </div>
            
        3 表单
            A 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。
            将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
            B 水平排列的表单
            通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。
            这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了
            eg：
            <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">
                    <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>

三 组件
    1 字体图标
    2 导航条
    3 分页
   
四 JavaScript插件
    1 图片轮播
    2 模态框
    3 tab页
    4 工具提示
    5 弹出框   

就业班_JavaEE_day06_bootstrap

    响应式页面开发即能针对不同的屏幕进行适配 ，依赖于jquery
一 环境准备
    <link rel="stylesheet" href="css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    添加meta
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
二全局CSS
        1 栅格系统
            栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中
            栅格系统的工作原理：
            A 行row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
            B 通过行（row）在水平方向创建一组列（column）。
            C 内容应当放置于“列（column）”内
            D 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局
            E 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。
            F 通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
            G 每行最多有12列。
            F .col-md-offset-* 类可以将列向右侧偏移
            col-xs-n 表示手机
            col-sm-n 表示平板
            col-md-n 表示中等屏幕pc
            col-lg-n   表示大屏幕pc
            嵌套列
            为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
            
        2 表格
            A 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线
            B  通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
            响应式表格
            将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格
            eg:
            <div class="table-responsive">
                  <table class="table">
                    ...
                  </table>
            </div>
            
        3 表单
            A 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。
            将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
            B 水平排列的表单
            通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。
            这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了
            eg：
            <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">
                    <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>

三 组件
    1 字体图标
    2 导航条
    3 分页
   
四 JavaScript插件
    1 图片轮播
    2 模态框
    3 tab页
    4 工具提示
    5 弹出框