创建bootstrap项目_使用Bootstrap创建表

创建bootstrap项目

In the previous article, we have learnt about typography, its different classes and how it works. Now, in this article, we’ll see what the different classes are and how to use them to create a table.

在上一篇文章中，我们了解了排版 ， 字体的不同类别以及其工作方式。 现在，在本文中，我们将了解不同的类以及如何使用它们创建表 。

About Bootstrap Table

关于引导表

Bootstrap has few table classes that help in building reliably styled and receptive tables. By default, Bootstrap table has a light padding and horizontal dividers. So, If you want to make a simple table with informally padded cells and horizontal dividers, apply Bootstrap table class to the .table element. Add the base class .table and spread with some traditional styles or use more dissimilar classes.

Bootstrap具有很少的表类，可以帮助构建样式可靠且易于接受的表。 默认情况下，Bootstrap表具有浅色填充和水平分隔线。 因此，如果要创建一个具有非正式填充的单元格和水平分隔符的简单表，请将Bootstrap表类应用于.table元素。 添加基类.table并使用某些传统样式进行传播，或使用更多不同的类。

Bootstrap tables deliver extra profits like receptiveness and the prospect of working on the styles of the tables. You can style your table by adding buttons, checkboxes, panels, and many other extra elements.

引导表会带来额外的收益，例如接受度和使用表样式的前景。 您可以通过添加按钮，复选框，面板和许多其他额外元素来为表格设置样式。

Striped Rows:

条纹行：

However keeping the .table class, add bootstrap .table-striped class for irregular background colors on the rows; which adds zebra stripes to any table row within the .tbody class.

但是，保留.table类，为行上不规则的背景色添加bootstrap .table-striped类； 它将斑马条纹添加到.tbody类中的任何表行。

Bordered Table:

边框表：

However keeping .table class, add .table-bordered class for borders on all sides of the table and cells.

但是，要保留.table类，请为表和单元格所有侧面的边框添加.table- bordered类。

Hover Rows:

悬停行：

However keeping the .table class in place, add .table-hover class to allow a hover result within a <tbody>; where you attain grey background color, when mouse points above the table rows.

但是，将.table类保留在适当的位置，请添加.table-hover类，以允许在<tbody>中进行悬停； 当鼠标指向表格行上方时，获得灰色背景色。

Black / Dark Table

黑/黑表

.table-dark class adds a black background to the table. You can use this class to reverse the colors so that it has bright text on a black background.

.table-dark类将黑色背景添加到表中。 您可以使用此类来反转颜色，以使其在黑色背景上具有明亮的文本。

Dark Striped Table:

暗条纹表：

Combine the two classes .table-dark and .table-striped class to create a dark, striped table.

组合两个类.table-dark和.table-striped类，以创建一个暗条纹表。

Hoverable Dark Table:

悬浮式黑桌：

Combine .table-hover and .table-dark class to create dark and a hover result (grey background color) on table rows.

组合.table-hover和.table-dark类以在表行上创建深色和悬浮结果(灰色背景色)。

Borderless Table

无边桌

Use .table-borderless class for a table without borders. This class take away borders from the table.

对没有边框的表使用.table-borderless类。 这个班级从桌子上夺走了边界。

Contextual Classes

上下文类

Contextual classes can be used to color the entire table, table rows or table cells. You can put on color to distinct rows or cells by using Bootstrap's relative classes. The 6 appropriate classes are available. viz .table-active, .table-primary, .table-info, .table-danger, .table-success, .table-warning.

上下文类可用于为整个表，表行或表单元格上色。 您可以使用Bootstrap的相对类为不同的行或单元格添加颜色。 有6种合适的类别。 即.table-active ， .table-primary ， .table-info ， .table-danger ， .table-success和.table-warning 。

Captions:

字幕：

It’s like a title on behalf of a table which helps users with screen readers to find a table and recognize what it’s about and choose if they want to read it.

就像代表表格的标题一样，它可以帮助屏幕阅读器的用户查找表格并识别表格的内容，并选择是否要阅读表格。

Table Head Colors:

表头颜色：

You can add background color to the header by using .thead-default, .thead-inverse, .thead-dark class ( it adds a black background to table headers and to deliver a proper modification); while, .thead-light class adds a grey background to table headers.

您可以使用.thead-default ， .thead-inverse ， .thead-dark类为标题添加背景色(它将黑色背景添加到表标题并进行适当的修改)； 而.thead-light类为表标题添加了灰色背景。

Small and condensed table:

小而精简的桌子：

While keeping .table class in place, you can use .table-sm class to make tables more solid by cutting cell padding in half.

在保持.table类不变的同时，您可以使用.table-sm类，通过将单元格填充减半来使表更坚固。

Responsive Tables

响应表

.table-responsive class {-sm|-md|-lg|-xl} creates a responsive table. Responsive tables habitually create horizontal scrollbars when seen on devices smaller than a given breakpoint. This horizontal scrollbar is added to the table on screens that are less than 992px wide. When inspecting on anything larger than 992px wide, you will not see any difference in these tables.

.table-active类{ -sm | -md | -lg | -xl }创建一个响应表。 在小于给定断点的设备上查看时，响应表通常会创建水平滚动条。 此水平滚动条将添加到宽度小于992px的屏幕上的表格中。 当检查宽度大于992px的东西时，这些表将不会有任何区别。

To create a responsive table, mount the table in a .div element that has the .table-responsive-*(.table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl) class applied. From that breakpoint and up, the table will act usually; without scrolling horizontally.

要创建一个响应表，安装表中具有。表-responsive- *(。 表响应-SM。 表响应-MD，。 表响应，LG，。 表-responsive-一个.div元素xl )类。 从该断点开始，该表将正常运行； 无需水平滚动。

Note: The .table-responsive class is equivalent to .table-responsive-md.

注意： .table-sensitive类与.table-sensitive-md等效。

Example code (HTML)

示例代码(HTML)

bootstrap_practice.html

bootstrap_practice.html

<!doctype html>
<html lang="en">

<head>
    <title> Page Title </title>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="F:\WEB DESIGN\bootstrap\bootstrap-4.1.3-dist\css\bootstrap.min.css">

    <script src="F:\WEB DESIGN\bootstrap\bootstrap-4.1.3-dist\js\bootstrap.bundle.min.js">
    </script>

</head>

<body>
    <!------------- striped table ------------------->
    <table class="table table-striped">
        <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Contact</th>
                <th>Contact</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Arti</td>
                <td>Parmar</td>
                <td>[email protected].com</td>
            </tr>
            <tr>
                <td>Mayank</td>
                <td>Parmar</td>
                <td>[email protected].com</td>
            </tr>
            <tr>
                <td>kartik</td>
                <td>aryan</td>
                <td>[email protected].com</td>
            </tr>
        </tbody>
    </table>
    <!------------- bordered table ------------------->
    <table class="table">
        <thead class="thead-light">
            <tr>
                <th>1) Header</th>
                <th>2) Header</th>
                <th>3) Header</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>1) Footer</th>
                <th>2) Footer</th>
                <th>3) Footer</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>kartik</td>
                <td>kriti</td>
                <td>varun</td>
            </tr>
            <tr>
                <td>singh</td>
                <td>anand</td>
                <td>biswas</td>
            </tr>
        </tbody>
    </table>
    <!------------------hover in table -------------->
    <table class="table table-hover">
        <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Contact</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>anjali</td>
                <td>sharma</td>
                <td>4763578234</td>
            </tr>
            <tr>
                <td>abhishek</td>
                <td>Anand</td>
                <td>4878223847</td>
            </tr>
            <tr>
                <td>shradha</td>
                <td>kapoor</td>
                <td>2847803284</td>
            </tr>
        </tbody>
    </table>
    <!------------------- black and dark table ---------------->
    <table class="table table-dark">
        <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>shivani</td>
                <td>rajpoot</td>
                <td>[email protected].com</td>
            </tr>
            <tr>
                <td>supriya</td>
                <td>rajput</td>
                <td>[email protected].com</td>
            </tr>
            <tr>
                <td>shivani</td>
                <td>yadav</td>
                <td>[email protected].com</td>
            </tr>
        </tbody>
    </table>

    <!------------------ dark striped table-------------------->
    <table class="table table-dark table-striped">
        <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Contact</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Murga</td>
                <td>Om</td>
                <td>374845943859</td>
            </tr>
            <tr>
                <td>Murgi</td>
                <td>bottle</td>
                <td>387545934</td>
            </tr>
            <tr>
                <td>Hero</td>
                <td>Alom</td>
                <td>34753975294</td>
            </tr>
        </tbody>
    </table>

    <!------------ dark hoverable table ------------------->
    <table class="table table-dark table-hover">
        <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Topper</td>
                <td>Murga</td>
                <td>[email protected].com</td>
            </tr>
            <tr>
                <td>Topper's</td>
                <td>Girl</td>
                <td>[email protected].com</td>
            </tr>
            <tr>
                <td>Hacker</td>
                <td>Alom</td>
                <td>[email protected].com</td>
            </tr>
        </tbody>
    </table>

    <!---------------borderless table ----------->
    <table class="table table-borderless">
        <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Atul</td>
                <td>Anand</td>
                <td>[email protected].com</td>
            </tr>
            <tr>
                <td>Bharti</td>
                <td>Parmar</td>
                <td>[email protected].com</td>
            </tr>
            <tr>
                <td>Partha</td>
                <td>Biswas</td>
                <td>[email protected].com</td>
            </tr>
        </tbody>
    </table>

    <!----------------table using contextual class ----------------->
    <table class="table">
        <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>contact</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hello</td>
                <td>Topper</td>
                <td>3857845096</td>
            </tr>
            <tr class="table-primary">
                <td>Hi</td>
                <td>Murge</td>
                <td>3847595934096</td>
            </tr>
            <tr class="table-success">
                <td>Hlo</td>
                <td>shivani</td>
                <td>34673599045</td>
            </tr>
            <tr class="table-danger">
                <td>Hye</td>
                <td>Alom</td>
                <td>2346598495</td>
            </tr>
            <tr class="table-info">
                <td>Hey</td>
                <td>Murgi</td>
                <td>3489594059</td>
            </tr>
            <tr class="table-warning">
                <td>Hello</td>
                <td>supriya</td>
                <td>3758759045</td>
            </tr>
            <tr class="table-active">
                <td>Hi</td>
                <td>Atul</td>
                <td>384783459</td>
            </tr>
            <tr class="table-secondary">
                <td>Hlo</td>
                <td>kartik</td>
                <td>3548596996</td>
            </tr>
            <tr class="table-light">
                <td>Hye</td>
                <td>Bharti</td>
                <td>38758475984</td>
            </tr>
            <tr class="table-dark text-dark">
                <td>Hey</td>
                <td>shradha</td>
                <td>3587859</td>
            </tr>
        </tbody>
    </table>

    <!------------------ table using caption ----------------->
    <table class="table">
        <caption>List of users</caption>
        <thead>
            <tr>
                <th scope="col">No.</th>
                <th scope="col">First</th>
                <th scope="col">Middle</th>
                <th scope="col">Last</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mr.</td>
                <td>Atul</td>
                <td>Agnihotri</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Mrs.</td>
                <td>Bharti</td>
                <td>Anand</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Hacker</td>
                <td>Alom</td>
                <td>Hero</td>
            </tr>
        </tbody>
    </table>
    <!--------------------- table with table head ------------->
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Contact</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Atul</td>
                <td>Bharti</td>
                <td>38448594</td>
            </tr>
            <tr>
                <td>Murga</td>
                <td>Murgi</td>
                <td>385774584</td>
            </tr>
            <tr>
                <td>Topper</td>
                <td>Topper's girl</td>
                <td>32847858</td>
            </tr>
        </tbody>
    </table>
    <table class="table">
        <thead class="thead-light">
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Contact</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Partha</td>
                <td>Bharti</td>
                <td>3756485949</td>
            </tr>
            <tr>
                <td>Takla</td>
                <td>Mataji</td>
                <td>384784589</td>
            </tr>
            <tr>
                <td>Hacker</td>
                <td>Shanti</td>
                <td>385845984</td>
            </tr>
        </tbody>
    </table>

    <!-------------small and condensed table ---------------->
    <table class="table table-bordered table-sm">
        <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Atul</td>
                <td>Anand</td>
                <td>[email protected].com</td>
            </tr>
            <tr>
                <td>Partha</td>
                <td>Biswas</td>
                <td>[email protected].com</td>
            </tr>
            <tr>
                <td>Bharti</td>
                <td>Parmar</td>
                <td>[email protected].com</td>
            </tr>
        </tbody>
    </table>

    <!---------------responsive table -------------->
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>1</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Contact</th>
                    <th>City</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2</td>
                    <td>Murga</td>
                    <td>Murgi</td>
                    <td>35346758</td>
                    <td>bihar</td>
                    <td>[email protected].com</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

</html>

bootstrap_practice.html

bootstrap_practice.html

Output

输出量

Mobile view

流动检视

Tablet view

平板电脑视图

Desktop view

桌面检视

Conclusion:

结论：

In this article we have discussed about How to create different type of responsive table by using several useful "table" classes. We used all the types of different classes to create a table with examples. I hope now, you all understand these concepts; how to use these classes and how to create different types of responsive tables. We will learn more about furthermore classes. Stay tuned for the next article. See you in the next article! Happy Learning!

在本文中，我们讨论了如何通过使用几个有用的“表”类来创建不同类型的响应表 。 我们使用了不同类的所有类型来创建带有示例的表。 我希望现在大家都了解这些概念。 如何使用这些类以及如何创建不同类型的响应表。 我们将进一步了解更多课程。 请继续关注下一篇文章。 下篇再见！ 学习愉快！

翻译自: https://www.includehelp.com/html/create-a-table-using-bootstrap.aspx

创建bootstrap项目