Home > Article > Web Front-end > 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!
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>
<pre class="brush:php;toolbar:false">table.table-striped tr:nth-child(odd){
background:red;
}
/*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/
.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
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
For details, please see:
##Product name Product price Product status success color
Xiaomi mobile phone 1499 Delivery active color
Xiaomi mobile phone 1499 Delivery infoColor
Xiaomi mobile phone 1499 Delivery warningColor
Xiaomi mobile phone 1499 Delivery
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!