1. Bootstrap layout

Global style style.css:

1. Remove the margin statement of the body

2. Set the background color of the body to white

3. Set the basic font, font size and line height for typesetting

4. Set the global link color, and the underline style will be displayed only when the link is in the floating ":hover" state

Title h1-h6

All title tags in HTML,

to

can be used. In addition, .h1 to .h6 class selectors are provided to give title styles to the text of inline attributes.

1. Reset the values of margin-top and margin-bottom

2. The values of h1~h3 after reset are all 20px; the values of h4~h6 after reset are all 10px

3. The line height of all titles is 1.1 (that is, 1.1 times the font-size), and the text color and font inherit the color and font of the parent element

4. Fixed Different levels of title font size, h1=36px, h2=30px, h3=24px, h4=18px, h5=14px and h6=12px

You can also include thetag in the title or give it the .small class element that can be used to mark subtitles.

Bootstrap heading Secondary Text

Bootstrap heading 2671b4d4b9901ac62384a197b51f92c1 Secondary text7552a991a706bdbcb00625c14ce34064

p Tag

(paragraph) element also The bottom margin is set to 10px.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Paragraphs can be highlighted by adding the .lead class.
b9e65200126209438507c030bae1f255
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus . Nullam id dolor id nibh ultricies vehicula.
bc5574f69a0cba105bc93bd3dc13c4ec

Tags that emphasize content

8c836cae9a587cbdfa9d25493fcc3e25Generally used with paragraph tags

Emphasis on related classes

text-muted： 提示，使用浅灰色（#999）text-primary：主要，使用蓝色（#428bca）text-success：成功，使用浅绿色(#3c763d)text-info： 通知信息，使用浅蓝色（#31708f）text-warning：警告，使用黄色（#8a6d3b）text-danger： 危险，使用褐色（#a94442）

Text alignment style

text-left： 左对齐 text-center： 居中对齐 text-right： 右对齐 text-justify：两端对齐

List

1, ul, ol < ;span style="color:red;">Desequence54bdf357c58b8a65c66d7c19c8e4d114：

class=“list-unstyled“

2, ul, ol 73b597b9c5e6d5ba87af8e04a3fe41c3Horizontal arrangementd6d448110e0324953b5d7bc1e2b276ce (Change the vertical list into a horizontal list, remove the bullets (numbers), and keep the horizontal display)

class=“list-inline”

3. dl horizontal list (when the screen is larger than 768px, add the class name ".dl-horizontal" ” has the horizontal definition list effect)

class=“dl-horizontal”

Picture

The method of use is very simple, just add the corresponding class name to the

tag
img-responsive: Responsive images, mainly for responsive design

img-rounded： 圆角图片 img-circle： 圆形图片 img-thumbnail： 缩略图片

Add it yourself and check the corresponding effect~ ~ ~

bootstrap icon

Bootstrap The framework also provides you with nearly 200 different icon images, and these icons are all icon effects achieved using the @font-face attribute of CSS3 in conjunction with fonts.

Any row-level element is acceptable, usually span tags are used as icon containers

7cda7d4b173f6b140d13745a8aab6ad2Can be viewed on the bootstrap website;span>

Usage is very simple, just copy and paste the English under the icon into the class:

##2, bootstrap-table

Basic Example

Striped table

Using the .table-striped class, you can add a zebra stripe style to each row within 92cee25da80fac49f6fb6eec5fd2c22a.

The striped table is implemented by relying on the :nth-child CSS selector, and this feature is not supported by Internet Explorer 8.

Bordered table

Add the .table-bordered class to add borders to the table and each cell within it.

Mouseover

You can make each row in 92cee25da80fac49f6fb6eec5fd2c22a respond to the mouseover state by adding the .table-hover class.

Condensed table

By adding the .table-condensed class, the table can be made more compact, and the padding in the cells will be halved.

The above is the detailed content of Summarize the usage examples of bootstrap front-end framework. For more information, please follow other related articles on the PHP Chinese website!