Bootstrap学习(三）table、form

今天学习table和form

table

之前做网站的时候不知道有bootstrap这个东西，不知道在table上浪费了多少时间！哎，一个人自学还是免不了走弯路~

<div class="container" >
        <table class="table table-border">
            <thead>
            <tr>
                <th>单价</th>
                <th>数量</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>5</td><td>5</td><td>5</td>
            </tr>
            <tr>
                <td>5</td><td>5</td><td>5</td>
            </tr>
            <tr>
                <td>5</td><td>5</td><td>5</td>
            </tr>
            </tbody>
        </table>
    </div>

.table-striped 斑马线格式

.table-border 加边框

.table-hover 鼠标悬浮特效

.table-condensed 更紧凑

给tr单元行设置各种背景颜色

 <tr class="warning">
                <td>5</td><td>5</td><td>5</td>
            </tr>
            <tr class="success">
                <td>5</td><td>5</td><td>5</td>
            </tr>
            <tr class="active">
                <td>5</td><td>5</td><td>5</td>
            </tr>
            <tr class="info">
                <td>5</td><td>5</td><td>5</td>
            </tr>
            <tr class="danger">
                <td>5</td><td>5</td><td>5</td>
            </tr>

.table-responsive 相应式表格，

页面大小小于一定值时表格下面产生滚动条，注意该class要放在包裹table的div中才会生效

form

  <form role="form">
         <div class="form-group">
             <label>用户名</label>
             <input type="date" class="form-control" placeholder="user">
         </div>
     </form>

注：role="form"是防止浏览器版本过低无法识别form；placeholder表示组件默认内容；

<label 当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上,label有个class="sr-only"表示 screen reader only，即将label内容展示给阅读器供盲人使用，对正常人达到隐藏label效果，如需隐藏label可使用

.form-group 一般放在div中，这样表单之间会互相保有间距

.form-control 宽度100%；圆角；浅灰色边框，阴影效果；

不同的输入组件(组件可在<input中加上disabled设置禁用状态)

<form role="form">
    <div class="form-group col-sm-10">
        <input type="date" class="form-control" placeholder="date">
    </div>
    <div class="form-group col-sm-10">
        <input type="email" class="form-control" placeholder="email">
    </div>
    <div class="form-group col-sm-10">
        <input type="password" class="form-control" placeholder="password">
    </div>
    <div class="form-group col-sm-10">
        <label>选择文件</label>
        <input type="file">
        <p class="help-block">选择你需要的文件</p>
    </div>
    <div class="form-group col-sm-10">
        <input type="text" class="form-control">
    </div>
    <div class="form-group col-sm-10">
            <button type="submit" class="btn btn-default">提交</button>
    </div>
</form>

.help-block 块级帮助文本

checkbox 复选框(value属性用于记录复选框是on还是off然后提交表单）

.checkbox 用于包裹checkbox的div中,复选按钮和后面的字会保持一定距离，且label会呈现悬浮点击效果。

<div class="checkbox">
                    <label>
                        <input type="checkbox" value=" ">记住密码
                    </label>
                </div>

radio 单选框（checked表示单选框被选中，在单选框中后者checked会覆盖前者）

<form role="form">
    <div class="radio col-sm-10">
        <label>
            <input name="optionsRadios" type="radio" checked>
            男
        </label>
    </div>
    <div class="radio col-sm-10">
        <label>
            <input name="optionsRadios" type="radio" checked>
            女
        </label>
    </div>
</form>

select选择下拉控件

 <select class="form-control col-lg-4">
        <option>d</option>
        <option>e</option>
        <option>n</option>
        <option>g</option>
    </select>

给<select添加multiple="multiple"标签，规定可同时选择多个选项

静态控件 .form-control-static

如果需要在表单中将一行纯文本和label元素放置于同一行,为<p元素添加.form-control-static类即可

  <label class="col-sm-2 control-label">Email:</label>
    <p class="form-control-static">按照XX@XX.com输入</p>

搜索表单 .form-search

搜索表单需要添加

 <link rel="stylesheet" href="http://www.bootcss.com/p/layoutit/css/bootstrap-combined.min.css">

注意：bootstrap-combined.min.css = bootstrap.min.css + bootstrap-responsive.min.css

<form class="form-search" role="form">
    <div class="form-group">
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn">Search</button>
    </div>
</form>

.input-append 给包裹控件标签的div添加（达到合并的效果）

textarea 文字域

 <textarea class="form-control" rows="3">Hello</textarea>

三种表单显示方式

垂直或基本表单

<form元素添加 role=“form”。文本元素用.form-control。标签控件div用.form-group。

内联表单

表单内控件向左对齐，并排显示，<form元素用 .form-inline，部分控件宽度默认100%，如果使用内联则要规定一定的宽度。

水平表单

标签和控件并排显示。

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名字</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="firstname"
                   placeholder="请输入名字">
        </div>
    </div>
</form>

设置不同颜色主题

<form   role="form">
    <div class="form-group has-error">
        <label class="col-sm-4 control-label">名字:</label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group has-success">
        <label class="col-sm-4 control-label">名字:</label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group has-feedback">
        <label class="col-sm-4 control-label">名字:</label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group has-warning">
        <label class="col-sm-4 control-label">名字:</label>
        <input type="text" class="form-control">
    </div>
</form>

小图标

<input type="text" class="form-control">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>

图标的代码在这里都找到https://getbootstrap.com/docs/3.3/components/

参考资料
1.https://blog.csdn.net/qq_29987661/article/details/82784487
2.https://www.cnblogs.com/cjx-work/p/7967357.html
3.https://www.runoob.com/bootstrap/bootstrap-tables.html
4.https://blog.csdn.net/qq_36748278/article/details/60571956
5.https://blog.csdn.net/fengsuiyingdong/article/details/72357479
6.https://blog.csdn.net/ixygj197875/article/details/79454281