BootStrap learning auxiliary class and introduction to responsive tools

青灯夜游
Release: 2018-10-13 17:48:41
forward
1847 people have browsed it

This article will introduce to you the auxiliary group classes and responsive tools for learning BootStrap. 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!

text-* indicates the font color, bg-* indicates the background color of the font

Close button.close

BootStrap learning auxiliary class and introduction to responsive tools

<button>×</button>
Copy after login

The default position is the upper right corner of the parent element

The small triangle icon.caret

<span></span>
Copy after login

Quickly float .pull-left and .pull-right

<p>我是文字</p>
<p>我是文字</p>
Copy after login

This float is actually float , just use !important to strengthen the priority.

Block-centered center-block

<p>我是文字</p>
Copy after login

Clear floating clearfix

<p>我是文字</p>
		

<p>我是文字</p>
Copy after login

This p can Just put it in front of the floating block that needs to be cleaned.

Show (.show) and hide (.hidden)

<p>我是文字</p>
		
<p>我是文字</p>
Copy after login

In fact, display: block or none added one! important strengthens the priority

Responsive tools

.visible-xs-*Display.visible-sm-*Display.visible-md- *Display.visible-lg-*Show.hiddem-xsHide.hidden-smhidden.hidden-mdhidden.hidden-lgHide
## Ultra small screen

Mobile phone (

Small screen

Tablet(≥768px)

Medium screen

Desktop(≥992px)

Large screen

Desktop (≥1200px)

For display There are three variations of content: block, inline-block, and inline.


The added styles have the priority of !important added.

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 BootStrap learning auxiliary class and introduction to responsive tools. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template