Introduction to typography style, list style, and table style of bootstrap layout

This article will introduce to you the layout style, list style, and table style of bootstrap layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. If you want to learn and get more bootstrap related video tutorials, you can also visit: bootstrap tutorial!

Layout container

bootstrap It believes that every web page should have a fixed width, it It will be centered horizontally and vertically inside the container or occupy 100% of the width of the container.

Bootstrap sets the global font-size to 14px, the line height to 1.428 (20px),

the paragraph line height to equal 1/2 (10px), and the color to # 333

1) Fixed width

.container class is used for fixed width and Containers that support responsive layout (horizontally centered).

2) Percent width

##.container-fluid Container for 100% width, occupying the entire visualization window.

Typesetting style

.text-center Center alignment

.text-right Align right

.text-left Align left

.text-uppercase Used to convert lowercase letters to uppercase letters

.text-lowercase is used to convert uppercase letters to lowercase letters

.text-capitalize is used to capitalize the first letter

The tag indicates an abbreviation or abbreviation, such as "WWW" or "NATO" (favorable for search engine searches)

# Highlight text (shading)

The following are the tags that have been copied by bootstrap

## is used to represent computer source code or other text content that can be read by a machine. (Adding shading)

##

 </p>Common applications represent the source code of the computer (Adding shading and borders)<p style="text-align:left;"><span style="font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';color:#000000;"> <span style="font-size:14px;background-color:rgb(253,252,248);"><span style="color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;text-align:left;background-color:rgb(253,252,248);"></span></span></span></p>List style<p><span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;"></span></strong></span>##List: ordered list, Unordered list, definition list. <br></p>
<p><span style="font-size:14px;color:#000000;"><strong></strong>.sr-only </span>Hide an element, which can be a row, a column, or the entire table</p>
<p></p>
<p><span style="font-size:14px;color:#000000;"><em>.list-unstyled</em> Used to remove the bullets in front of the list and remove the default margin value of the list </span></p>
<p><span style="font-size:14px;color:#000000;">.list-inline will Arrange the contents of the list into the same row, and add a small amount of padding value </span></p>
<p><span style="font-size:14px;color:#000000;">.dl-horizontal</span><span style="font-size:14px;color:#ff6666;"> to define the list to use </span><span style="font-size:14px;color:#000000;">, will Arrange the definition title and definition description information on the same line, and arrange the content in the dt tag and dd tag on the same line</span></p>
<p><span style="color:rgb(0,0,0);"><span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;">Table style</span> </strong></span><br></span></p>
<p><span style="font-size:14px;color:#000000;">##.table<em> Adding the .table class to any <table> tag can give it a basic style, a few padding and horizontal dividing lines. </em></span></p>
<p><span style="font-size:14px;color:#000000;">.table-bordered<em> Add border lines to the table and each cell in it</em></span></p>
<p><span style="font-size:14px;color:#000000;">. table-striped <em>Achieve the color-changing effect of each row (</em></span>IE8 does not support <span style="font-size:14px;color:#ff6666;"></span>)<span style="font-size:14px;color:#000000;"></span></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table.table-striped tr:nth-child(odd){
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

Copy after login

.table-hoverRealize the effect of mouse placement

		 table.table-hover tr:hover{
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

.table-condensed For a compact table, halve the padding value

.table-responsive Set responsiveness to the table parent element. When the screen is smaller than 768px, a border will appear around it

The status class

can only be set for tr or td or th, and cannot be set for table tags

Through these status classes Colors can be set for rows or cells

For details, please see:

Category	##Description	Instance
.active	Apply the hover color to the row or cell	Try it out
.success	#Indicates successful operation	Attempt one time
.info	##Operations indicating changes in information	Try it
##.warning	Indicates a warning operation	Try it
.danger	Indicates a dangerous operation	Attempt one time

##Product nameProduct priceProduct statussuccess colorXiaomi mobile phone1499 Deliveryactive colorXiaomi mobile phone1499 DeliveryinfoColorXiaomi mobile phone1499DeliverywarningColorXiaomi mobile phone1499Delivery

			danger color

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of Introduction to typography style, list style, and table style of bootstrap layout. For more information, please follow other related articles on the PHP Chinese website!