第二百三十三节，Bootstrap表格和按钮

Bootstrap表格和按钮

学习要点：

　　1.表格

　　2.按钮

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

一．表格

Bootstrap 提供了一些丰富的表格样式供开发者使用。

1.基本格式

实现基本的表格样式

table样式class类，写在

标签里，将表格执行表格基本样式并且自适应(Bootstrap)

<table class="table">
    <thead>
        <tr>
            <th>编号th>
            <th>姓名th>
            <th>性别th>
            <th>年龄th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>1td>
            <td>张三td>
            <td>男td>
            <td>50td>
        tr>
        <tr>
            <td>2td>
            <td>李四td>
            <td>女td>
            <td>48td>
        tr>
        <tr>
            <td>3td>
            <td>王五td>
            <td>男td>
            <td>52td>
        tr>
        <tr>
            <td>4td>
            <td>马六td>
            <td>男td>
            <td>55td>
        tr>
    tbody>
table>

2.条纹状表格

让里的行产生一行隔一行加单色背景效果

table-striped样式class类，写在

标签里，让里的行产生一行隔一行加单色背景效果(Bootstrap)

<table class="table table-striped">
    <thead>
        <tr>
            <th>编号th>
            <th>姓名th>
            <th>性别th>
            <th>年龄th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>1td>
            <td>张三td>
            <td>男td>
            <td>50td>
        tr>
        <tr>
            <td>2td>
            <td>李四td>
            <td>女td>
            <td>48td>
        tr>
        <tr>
            <td>3td>
            <td>王五td>
            <td>男td>
            <td>52td>
        tr>
        <tr>
            <td>4td>
            <td>马六td>
            <td>男td>
            <td>55td>
        tr>
    tbody>
table>

3.带边框的表格

给表格增加边框

table-bordered样式class类，写在

标签里，给表格增加边框(Bootstrap)

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>编号th>
            <th>姓名th>
            <th>性别th>
            <th>年龄th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>1td>
            <td>张三td>
            <td>男td>
            <td>50td>
        tr>
        <tr>
            <td>2td>
            <td>李四td>
            <td>女td>
            <td>48td>
        tr>
        <tr>
            <td>3td>
            <td>王五td>
            <td>男td>
            <td>52td>
        tr>
        <tr>
            <td>4td>
            <td>马六td>
            <td>男td>
            <td>55td>
        tr>
    tbody>
table>

4.悬停鼠标

让下的表格悬停鼠标实现背景效果

table-hover样式class类，写在

标签里，让下的表格悬停鼠标实现背景效果(Bootstrap)

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>编号th>
            <th>姓名th>
            <th>性别th>
            <th>年龄th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>1td>
            <td>张三td>
            <td>男td>
            <td>50td>
        tr>
        <tr>
            <td>2td>
            <td>李四td>
            <td>女td>
            <td>48td>
        tr>
        <tr>
            <td>3td>
            <td>王五td>
            <td>男td>
            <td>52td>
        tr>
        <tr>
            <td>4td>
            <td>马六td>
            <td>男td>
            <td>55td>
        tr>
    tbody>
table>

5.状态类

可以单独设置每一行的背景样式

success样式class类，写在

标签里，可以单独设置每一行的背景样式(Bootstrap)

一共五种不同的样式可供选择。每一种背景颜色不同

active样式class类，写在

标签里，鼠标悬停在行或单元格上(Bootstrap)
info样式class类，写在标签里，标识普通的提示信息或动作(Bootstrap)
warning样式class类，写在标签里，标识警告或需要用户注意(Bootstrap)
danger样式class类，写在标签里，表示危险或潜在的带来负面影响的动作(Bootstrap)

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr class="success">
            <th>编号th>
            <th>姓名th>
            <th>性别th>
            <th>年龄th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>1td>
            <td>张三td>
            <td>男td>
            <td>50td>
        tr>
        <tr>
            <td>2td>
            <td>李四td>
            <td>女td>
            <td>48td>
        tr>
        <tr>
            <td>3td>
            <td>王五td>
            <td>男td>
            <td>52td>
        tr>
        <tr>
            <td>4td>
            <td>马六td>
            <td>男td>
            <td>55td>
        tr>
    tbody>
table>

6.隐藏某一行

隐藏行

sr-only样式class类，写在

标签里，隐藏某一行(Bootstrap)

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr class="success">
            <th>编号th>
            <th>姓名th>
            <th>性别th>
            <th>年龄th>
        tr>
    thead>
    <tbody>
        <tr class="sr-only">
            <td>1td>
            <td>张三td>
            <td>男td>
            <td>50td>
        tr>
        <tr>
            <td>2td>
            <td>李四td>
            <td>女td>
            <td>48td>
        tr>
        <tr>
            <td>3td>
            <td>王五td>
            <td>男td>
            <td>52td>
        tr>
        <tr>
            <td>4td>
            <td>马六td>
            <td>男td>
            <td>55td>
        tr>
    tbody>
table>

7.响应式表格

表格父元素设置响应式，小于 768px 出现边框

table-responsive样式class类，写在标签里，表格父元素设置响应式，小于 768px 出现边框(Bootstrap)

<body class="table-responsive">

<table class="table table-striped table-hover">
    <thead>
        <tr class="success">
            <th>编号th>
            <th>姓名th>
            <th>性别th>
            <th>年龄th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>1td>
            <td>张三td>
            <td>男td>
            <td>50td>
        tr>
        <tr>
            <td>2td>
            <td>李四td>
            <td>女td>
            <td>48td>
        tr>
        <tr>
            <td>3td>
            <td>王五td>
            <td>男td>
            <td>52td>
        tr>
        <tr>
            <td>4td>
            <td>马六td>
            <td>男td>
            <td>55td>
        tr>
    tbody>
table>


<script src="jquery/jquery.min.js">script>

<script src="bootstrap/js/bootstrap.min.js">script>
body>

 

二．按钮

Bootstrap 提供了很多丰富按钮供开发者使用。

1.可作为按钮使用的标签或元素

转化成普通按钮

btn样式class类，写在标签里，按钮基本样式(Bootstrap)

<a href="###" class="btn btn-default">Linka>
<button class="btn btn-default">Buttonbutton>
<input type="button" class="btn btn-default" value="input">

注意事项有三点：

(1).针对组件的注意事项
　　虽然按钮类可以应用到 和