Bootstrap响应式框架表格表单

一.  Bootstrap 的表格和表单，使用Bootstrap框架需要先进入https://v3.bootcss.com下载Bootstrap下载完成部署至js文件夹和css文件夹内部，在HTML里加载Bootstrap的css和js加载代码如下：

1.<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />

2.<link rel="stylesheet" type="text/css" href="style/index.css">

3.<script type="text/javascript" src="js/jquery.js"></script>

4.<script type="text/javascript" src="js/bootstrap.js"></script>

5.<script type="text/javascript" src="js/index.js"></script>

  需要书写在<title>Document</title>下放，

  第一步先书写加载Bootstrap的css文件

  第二部书写加载的css文件

  第三部书写加载的jquery文件jquery文件需要在jquery官网下载并部署至js文件夹内部

  第四部书写加载Bootstrap的js文件

  第五步书写加载的js文件

  注意：加载以上五个文件需要按着顺序来加载  书写加载完成就可以使用Bootstrap框架

  二.表格在 Bootstrap中的使用：

  Bootstrap表格在<table></table>标记里使用

 1. <table class="table"></table>  table标记对里具备table类名形成基本表格无需书写css

  2.<table class="table table-striped"></table> 书写table-striped形成斑马线表格

  3.<table class="table table-bordered"></table>书写table-bordered形成带有边框的表格

  4.<table class="table table-hover"></table>书写table-hover形成鼠标悬停表格

  5.<table class="table table-condensed"></table>书写table-condensed形成紧缩性表格

  6.在数据行<tr></tr>标记对和单元表格<th></th>,<td></td>标记对上可以使用强调色

  7.<tr class="active"></tr>             //灰色的
     <tr class="success"></tr>         //绿色的
     <tr class="info"></tr>                //蓝色的
     <tr class="warning"></tr>         //黄色的
    <tr class="danger"></tr>            //紫色的

9.在移动端导致宽短较大的表格，会在table-responsive容器内产生专门针对表格的水平滚动条

  .table-responsive书写在<table></table>标记对外部容器内。例如：

  <div class="table-responsivb">

  <table></table>

  </div>

三. 表单在Bootstrap中的使用：

1.所有表单都需要使用.form-group的类名进行包裹

2.所有表单元素都要具备.rorm-control类

3.所有表单元素文本前面必须使用<lable></lable>标记对，并且通过for属性与表单元素进行绑定

4.基础表单代码书写如下：
1.<div class="form-group">

<lable for="*">*</lable>

<input type="text" id="*" class="form-control">

</div>

这是一个账号文本框

2.<div class="form-group">

<lable for="*">*</lable>

<input type="password" id="*" class="form-control">

</div>

这是一个密码域