table style :

.table: Basic table style , Very few padding, A thin horizontal line of gray .
.table-striped: Zebra pattern , Change colors between lines .
.table-bordered: Add borders to the table and each cell in it .
.table-hover: Mouse hovering , When the mouse passes the data line , The background color of this line is the same as that of zebra pattern .
.table-condensed: Compact form ,padding halve .

<table class="table table-striped table-bordered table-hover">
......
</table>

tr or td style : These state classes let you set the color of a row or cell .

.active: The color you set when hovering over a row or cell
.success: Identify successful or positive actions
.danger: Identify dangerous or potentially negative actions
.warning: Sign warning or need user's attention
.info: To mark a common prompt or action

<table class="table table-bordered table-hover">
<tr><th> Style sheets </th><th> explain </th></tr>
<tr class="success"><td>.....
</table>

Response table

Change any .table The elements are wrapped in .table-responsive Within the element , You can create a responsive table , It will be on a small screen device ( Less than 768px) Horizontal scrolling . When the screen is larger than 768px Width , The horizontal scroll bar disappears .

<div class="table-responsive">
<table class="table">
...
</table>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="success">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="danger">Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>

Bootstrap Introduction 5 : More related articles on the form

  1. Bootstrap &lt; Foundation five &gt; form

    Bootstrap Provides a clear layout for creating tables . The following table lists them Bootstrap Some of the table elements supported : label describe <table> Add a base style to the table . <thead> form ...

  2. Bootstrap introduction ( 15、 ... and ) Components 9: Panel as

    Bootstrap introduction ( 15、 ... and ) Components 9: Panel as Although it's not always necessary , But sometimes you may need to put some DOM Put the content in a box . In this case , Try panel components . 1. Basic examples 2. Panels with titles 3. Situational effects ...

  3. Bootstrap introduction ( twenty-five )JS plug-in unit 2: Transition effects

    Bootstrap introduction ( twenty-five )JS plug-in unit 2: Transition effects For simple transition effects , Just put the  transition.js  And other JS Files can be imported together . If you're using compilation ( Or compression ) Version of bootstrap.js  ...

  4. Bootstrap introduction ( 5、 ... and ) Forms

    Bootstrap introduction ( 5、 ... and ) Forms   First introduce the local CSS file   <link href="css/bootstrap.min.css" rel="stylesheet ...

  5. Bootstrap introduction ( Four ) form

    Bootstrap introduction ( Four ) form <table> label First , introduce bootstrap Of css file , Then the contents of the form are placed in a class by table Of <table> In the label (class=& ...

  6. Bootstrap introduction (2) form

    Bootstrap introduction ( Four ) form <table> label First , introduce bootstrap Of css file , Then the contents of the form are placed in a class by table Of <table> In the label (class=& ...

  7. BootStrap Introductory tutorial ( One )

    BootStrap Introductory tutorial ( One )   2011 year ,twitter Of " A handful of " In order to improve their internal analysis and management ability , In their spare time, they built an easy-to-use . grace . flexible . Scalable front end ...

  8. bootstrap introduction

    bootstrap introduction <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...

  9. 【Bootstrap】 bootstrap-table Table components

    [Bootstrap-table] seeing the name of a thing one thinks of its function , This component focuses on bootstrap Style of table design , It also provides many basic and advanced functions of tables , Save a lot of effort for us to develop front-end forms . This article mainly refers to this blogger's series of articles ...

Random recommendation

  1. Use django Development blog process record 3—— Blog sidebar implementation

    Talking about this sidebar is really distressing for me for a long time , At first, I thought it was OK to pass additional parameters as before, just like the following : class IndexView(ListView): template_name = 'apps/index. ...

  2. Chip shader (Fragment Shader) Called pixel shaders (Pixel Shader), but

    Chip shader (Fragment Shader) Called pixel shaders (Pixel Shader), But the chip shader is a better name , Because the pixel is not a real pixel .

  3. bzoj4511:[Usaco2016 Jan]Subsequences Summing to Sevens

    The main idea of the topic : Give me a sequence , Find the longest continuous subsequence to be 7 Multiple It's another delightful water problem that you don't need to use your brain .. Read in at the same time , Edge computes the prefix and Save the prefix and %7 The result is 1,2,3,4,5,6 The location of the first time And then you subtract it to get the length ...

  4. be based on Vivado HLS stay zedboard Medium Sobel Filter algorithm implementation

     be based on Vivado HLS stay zedboard Medium Sobel Filter algorithm implementation platform :zedboard  + Webcam Tools :g++4.6  + VIVADO HLS  + XILINX EDK + ...

  5. sqlserver Complex sorting (order by case when)

     /* surface sysid Since the primary key   scro fraction   oper Operating time scro fraction > 5 According to   fraction Descending , The score is less than or equal to 5 According to Operating time Ascending ; >5 Of the <=5 In front of */ ...

  6. JQuery send out Put、Delete request - From the Internet

    DELETE: $.ajax({ url: '/script.cgi', type: 'DELETE', success: function(result) { // Do something wit ...

  7. SpringMVC Project access Springfox Collection of problems encountered in actual combat

    In order to facilitate the management of the project API Interface , Now I always write the interface , And then you have to maintain a document , It's too tiring for developers , I found a lot about on the Internet API Interface management and document generation information , An accident with 51 The great God of communication found Swagger ...

  8. mysql And 6 Backup recovery

    The basic meaning : Save data to another device , In order to recover data in case of problems     Why backup : disaster recovery : Demand changes : test     A few things to think about in advance : How long data loss can be tolerated ? How long does the recovery take to complete ? whether ...

  9. 【angularjs】【 The learning 】ng-class summary

    original text :http://www.imooc.com/wenda/detail/236998 Let's talk about it today angularjs It seems very simple, but there are many problems in practice ng-class Well ----------- ...

  10. css New unit fr

    fr yes css Just out of a new unit , At present, after testing in chrome and firefox It can be supported Let's take a case study , Take a grid layout for example <!DOCTYPE html> <html lang=&quo ...