（二）表格和按钮

时间 2019-11-19

标签表格按钮繁體版

原文原文链接

一．表格

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

1.基本格式

//实现基本的表格样式 html

<table class="table">

注：咱们能够经过 Firebug 查看相应的 CSSjava

2.条纹状表格

//让<tbody>里的行产生一行隔一行加单色背景效果jquery

<table class="table table-striped">

注：表格效果须要基于基本格式.tablebootstrap

3.带边框的表格

//给表格增长边框ide

<table class="table table-bordered">

4.悬停鼠标

//让<tbody>下的表格悬停鼠标实现背景效果this

 <table class="table table-hover">

5.状态类

//能够单独设置每一行的背景样式spa

<tr class="success">

注：一共五种不一样的样式可供选择。以下图。code

6.隐藏某一行

//隐藏行orm

 <tr class="sr-only">

7.响应式表格

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

<body class="table-responsive">

8. 案例

<%--
  Created by IntelliJ IDEA.
  User: shyroke
  Date: 2018/6/13 0013
  Time: 17:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();

%>
<html>
<head>
    <title>boostrap</title>
    <link rel="stylesheet" href="<%=path%>/script/bootstrap/css/bootstrap.css">
</head>
<body style="margin: 50px">


   <table class="table  table-bordered table-hover">
       <thead>
           <tr >
               <td>编号</td>
               <td>姓名</td>
               <td>性别</td>
               <td>年龄</td>
           </tr>
       </thead>
       <tbody>
        <tr class="success">
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr class="info">
            <td>2</td>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>男</td>
            <td>28</td>
        </tr>
       </tbody>
   </table>


<script src="<%=path%>/script/jquery-3.2.1.min.js"></script>
<script src="<%=path%>/script/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

结果：

2、按钮

Bootstrap 提供了不少丰富按钮供开发者使用。

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

为 <a>、<button> 或 <input> 元素添加按钮类（button class）便可使用 Bootstrap 提供的样式。

//转化成普通按钮

<a href="###" class="btn btn-default">Link</a>
 <button class="btn btn-default">Button</button>
 <input type="button" class="btn btn-default" value="input">

2. 注意事项

3. 预约义样式

使用下面列出的类能够快速建立一个带有预约义样式的按钮。

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（通常信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（连接）Link</button>

4.尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 就能够得到不一样尺寸的按钮。

<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）元素。

<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>

5.激活状态

<button class="btn active">Button</button>

6.禁用状态

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

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>