Bootsrap中的表格、表单、按钮、图片

爱被打了一巴掌 2023-02-09 10:22 1阅读 0赞

### 1.表格 ###

为任意 `<table>` 标签添加 `.table` 类

普通

![20200518151500454.png][]

<table class="table" border="" cellspacing="" cellpadding="">
     <tr><th>#</th><th>Header</th><th>Header</th><th>Header</th></tr>
     <tr><td>1</td><td>Data</td><td>Data</td><td>Data</td></tr>
     <tr><td>2</td><td>Data</td><td>Data</td><td>Data</td></tr>
    </table>

条纹状  .table-striped

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70][]

<table class="table table-striped" border="" cellspacing="" cellpadding="">
     <tr><th>#</th><th>Header</th><th>Header</th><th>Header</th></tr>
     <tr><td>1</td><td>Data</td><td>Data</td><td>Data</td></tr>
     <tr><td>2</td><td>Data</td><td>Data</td><td>Data</td></tr>
     <tr><td>3</td><td>Data</td><td>Data</td><td>Data</td></tr>
     <tr><td>4</td><td>Data</td><td>Data</td><td>Data</td></tr>
    </table>

带边框的表格

添加 `.table-bordered` 类为表格和其中的每个单元格增加边框。

![20200518151925503.png][]

鼠标悬停改变状态

通过添加 `.table-hover` 类可以让 `<tbody>` 中的每一行对鼠标悬停状态作出响应

![20200518152019926.png][]

为行或者单元格设置颜色

<table> 
 <thead> 
  <tr> 
   <th>Class</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th><code>.active</code></th> 
   <td>鼠标悬停在行或单元格上时所设置的颜色</td> 
  </tr> 
  <tr> 
   <th><code>.success</code></th> 
   <td>标识成功或积极的动作</td> 
  </tr> 
  <tr> 
   <th><code>.info</code></th> 
   <td>标识普通的提示信息或动作</td> 
  </tr> 
  <tr> 
   <th><code>.warning</code></th> 
   <td>标识警告或需要用户注意</td> 
  </tr> 
  <tr> 
   <th><code>.danger</code></th> 
   <td>标识危险或潜在的带来负面影响的动作</td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1][]

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

响应式表格

将任何 `.table` 元素包裹在 `.table-responsive` 元素内

### 2. 表单 ###

普通表单

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2][]

<form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>

不要将表单组和输入框组混合使用

内联表单

![20200518152424731.png][]

<form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
      </div>
      <button type="submit" class="btn btn-default">Send invitation</button>
    </form>

![20200518152459856.png][]

<form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail3">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword3">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>

![20200518152523582.png][]

<form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
        <div class="input-group">
          <div class="input-group-addon">$</div>
          <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
          <div class="input-group-addon">.00</div>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Transfer cash</button>
    </form>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 3][]

<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">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </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>

输入框  输入类型

`text`、`password`、`datetime`、`datetime-local`、`date`、`month`、`time`、`week`、`number`、`email`、`url`、`search`、`tel` 和 `color`。

在这里都可以加上  .form-control  就会有相应的样式

文本域也可以

![20200518152916869.png][]

下拉列表 select

![20200518153030209.png][]

只读状态

![20200518153139610.png][]

### 3.按钮 ###

![20200518153236912.png][]

<button type="button" class="btn btn-default">（默认样式）Default</button>
    
    
    <button type="button" class="btn btn-primary">（首选项）Primary</button>
    
    
    <button type="button" class="btn btn-success">（成功）Success</button>
    
    
    <button type="button" class="btn btn-info">（一般信息）Info</button>
    
    
    <button type="button" class="btn btn-warning">（警告）Warning</button>
    
    
    <button type="button" class="btn btn-danger">（危险）Danger</button>
    
    
    <button type="button" class="btn btn-link">（链接）Link</button>

使用 `.btn-lg`、`.btn-sm` 或 `.btn-xs` 就可以获得不同尺寸的按钮。

![20200518153311933.png][]

<p>
      <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
      <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
      <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
      <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
      <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
    </p>

通过给按钮添加 `.btn-block` 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

![20200518153342301.png][]

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
    <button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

为 `<button>` 元素添加 `disabled` 属性，使其表现出禁用状态。

为基于 `<a>` 元素创建的按钮添加 `.disabled` 类。

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
    <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

4.图片

响应式图片

通过为图片添加 `.img-responsive` 类可以让图片支持响应式布局。其实质是为图片设置了 `max-width: 100%;`、 `height: auto;` 和 `display: block;` 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 `.img-responsive` 类的图片水平居中，请使用 `.center-block` 类

![20200518153629689.png][]

文本颜色

![2020051815373894.png][]

背景色类

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 4][]

[20200518151500454.png]: https://img-blog.csdnimg.cn/20200518151500454.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518151718834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[20200518151925503.png]: https://img-blog.csdnimg.cn/20200518151925503.png
[20200518152019926.png]: https://img-blog.csdnimg.cn/20200518152019926.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200518152122988.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200518152323805.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[20200518152424731.png]: https://img-blog.csdnimg.cn/20200518152424731.png
[20200518152459856.png]: https://img-blog.csdnimg.cn/20200518152459856.png
[20200518152523582.png]: https://img-blog.csdnimg.cn/20200518152523582.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200518152621207.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[20200518152916869.png]: https://img-blog.csdnimg.cn/20200518152916869.png
[20200518153030209.png]: https://img-blog.csdnimg.cn/20200518153030209.png
[20200518153139610.png]: https://img-blog.csdnimg.cn/20200518153139610.png
[20200518153236912.png]: https://img-blog.csdnimg.cn/20200518153236912.png
[20200518153311933.png]: https://img-blog.csdnimg.cn/20200518153311933.png
[20200518153342301.png]: https://img-blog.csdnimg.cn/20200518153342301.png
[20200518153629689.png]: https://img-blog.csdnimg.cn/20200518153629689.png
[2020051815373894.png]: https://img-blog.csdnimg.cn/2020051815373894.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200518153810741.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70