（二）表格和按鈕

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。