BootStrap框架入门到精通视频课程 4：Bootstrap表格和按钮

最新推荐文章于 2023-07-10 19:12:40 发布

老张谋

最新推荐文章于 2023-07-10 19:12:40 发布

阅读量445

点赞数 2

文章标签： bootstrap

本文链接：https://blog.csdn.net/wgf5845201314/article/details/94412237

版权

BootStrap表格和按钮

本节课所讲内容：

1. Bootstrap表格

2. Bootstrap按钮

主讲教师：Head老师

本节课我们主要学习一下 Bootstrap 表格和按钮功能，通过内置的 CSS ，显示各种丰富的效果。

一．Bootstrap表格

1.Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

1.table：基础表格

2.table-striped：斑马线表格（让表格带有背景条纹效果）

3.table-bordered：带边框的表格（所有单元格具有一条1px的边框。）

4.table-hover：鼠标悬停高亮的表格（当鼠标悬停在表格的行上面有一个高亮的背景色）

5.table-condensed：紧凑型表格（单元格没内距或者内距较其他表格的内距更小）

6.table-responsive：响应式表格（当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失）

2.Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

类名	描述	对应的颜色
.active	单前活动的信息	#f5f5f5
.success	成功或者正确的行为	#dff0d8
.info	中立的信息或行为	#d9edf7
.warning	表示警告	#fcf8e3
.danger	表示危险或者错误	#f2dede

使用非常的简单，只需要在<tr>元素中添加上表对应的类名，就能达到你自己需要的效果。

<table class="table table-bordered">

    <thead>

      <tr>

        <th>类名</th>

        <th>描述</th>

      </tr>

    </thead>

    <tbody>

      <tr class="active">

       <td>.active</td>

       <td>表示当前活动的信息</td>

     </tr>

     <tr class="success">

       <td>.success</td>

       <td>表示成功或者正确的行为</td>

     </tr>

     <tr class="info">

       <td>.info</td>

       <td>表示中立的信息或行为</td>

     </tr>

     <tr class="warning">

       <td>.warning</td>

       <td>表示警告，需要特别注意</td>

     </tr>

     <tr class="danger">

       <td>.danger</td>

       <td>表示危险或者可能是错误的行为</td>

     </tr>

   </tbody>

二．Bootstrap 按钮

1.基本按钮

　　Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样，都是通过类名“btn”来实现。不同的是在V3.x版本要简约很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如说文本阴影（text-shadow）、渐变背景（background-image）、边框阴影（box-shadow）等。

　　难能可贵的是，Bootstrap框架中的考虑了不同浏览器的解析差异，进行了比较安全的兼容性处理，使按钮效果在不同的浏览器中所呈现的效果基本相同。

<button class="btn" type="button">我是一个基本按钮</button>

2.默认按钮

　　Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。使用默认按钮风格也非常的简单，只需要在基础按钮“btn”的基础上增加类名“btn-default”即可。

<button class="btn btn-default" type="button">默认按钮</button>

3.多标签支持

一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，强烈建议使用button或a标签来制作按钮。

<button class="btn btn-default" type="button">button标签按钮</button>

<input type="submit" class="btn btn-default" value="input标签按钮"/>

 <span class="btn btn-default">span标签按钮</span> 

 <div class="btn btn-default">div标签按钮</div>

4.定制风格

在介绍按钮开篇就说过，Web页面可能会有不同的按钮风格。那么在Bootstrap框架也考虑了。在Bootstrap框架中除了默认的按钮风格之外，还有其他六种按钮风格，每种风格的其实都一样，不同之处就是按钮的背景颜色、边框颜色和文本颜色。

在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现，在使用过程中，开发者只需要选择不同的类名即可：

类名	用途	描述	颜色	效果
.btn	基础按钮	BootStrap框架基础按钮	背景：浅灰色边框：透明色文本：#000
.btn-default	默认按钮	BootStrap框架默认按钮	背景：#fff 边框：#ccc 文本：#333
.btn-primary	主要按钮	BootStrap框架主要按钮	背景：#3276b1 边框：#285e8e 文本：#fff
.btn-success	成功按钮	BootStrap框架成功按钮	背景：#5cb85c 边框：#4cae4c 文本：#fff
.btn-info	信息按钮	BootStrap框架信息按钮	背景：#5bc0de 边框：#46b8da 文本：#fff
.btn-warning	警告按钮	BootStrap框架警告按钮	背景：#f0ad4e 边框：#eea236 文本：#fff
.btn-danger	危险按钮	BootStrap框架危险按钮	背景：#d9534f 边框：#d43f3a 文本：#fff
.btn-link	链接按钮	BootStrap框架链接按钮	背景：#无边框：#透明文本：#428bca

使用起来就很简单，就像前面介绍的默认按钮一样的使用方法，只需要在基础按钮“.btn”基础上追加对应的类名，就可以得到需要的按钮风格。

  <body>

     <button class="btn" type="button">基础按钮.btn</button> 

     <button class="btn btn-default" type="button">默认按钮.btn-default</button>

     <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>

     <button class="btn btn-success" type="button">成功按钮.btn-success</button>

    <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>

    <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>

    <button class="btn btn-link" type="button">链接按钮.btn-link</button>

 </body>

5.按钮大小

上一节介绍了按钮的定制风格，也就是如何实现Web页面中多种风格按钮。在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。

在Bootstrap框架中提供了三个类名来控制按钮大小：

类名	描述	控制参数		效果
.btn-lg	变大	padding	10px 16px
		font-size	18px
		line-height	1.33
		border-radius	6px
.btn	正常	padding	6px 12px
		font-size	14px
		line-height	1.42857143
		border-radius	4px
.btn-sm	缩小	padding	5px 10px
		font-size	12px
		line-height	1.5
		border-radius	3px
.btn-xs	超小	padding	1px 5px
		font-size	12px
		line-height	1.5
		border-radius	3px

从上表中不难发现，在Bootstrap框架中控制按钮的大小都是通过修改按钮的padding、line-height、font-size和border-radius几个属性。

那么在实际使用中，这几个类名可以配合按钮中其他颜色类名一起使用，但唯一一点不能缺少“.btn”类名

<body>

     <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>

     <button class="btn btn-primary" type="button">正常按钮</button>

 <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

 </body>

6.按钮状态——禁用状态

和input等表单控件一样，在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%。

在Bootstrap框架中，要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”

两者的主要区别是：

“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。

对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

 <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>

 <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

<button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>