Special effects of Bootstrap 3.0 study notes (display and hide, eliminate floating, close button, etc.)
|
The main contents of this article are as follows: 1. Close button 2.Carets 3. Quickly set floating 4. Center the content area 5. Clear Floats 6. Show or hide content 7. Content for screen readers 8. Image Replacement 9. Summary Close button Can be used to make modal dialogs and alerts disappear by using an icon that symbolizes a close. Copy code The code is as follows: <button type="button" class="close" aria-hidden="true">×</button>
Carets Use the caret to indicate the function and direction of the dropdown. Note that by default the caret is automatically inverted in the dropup menu. Copy code The code is as follows: <span class="caret"></span>
Quick Setup Float These two classes allow page elements to float left and right. !important is used to avoid certain problems. You can also use these two classes like mixins. Copy code The code is as follows: <div class="pull-left">...</div> <div class="pull-right">...</div> Copy code The code is as follows: // Classes .pull-left { float: left !important; } .pull-right { float: right !important; } // Usage as mixins .element { .pull-left(); } .another-element { .pull-right(); } Do not use for navigation barsIf you are aligning components on a navbar, be sure to use .navbar-left or .navbar-right. See the navigation bar documentation for details. Center the content area Set the page element to display: block and center it by setting margins. Can be used as a mixin or a class. Copy code The code is as follows: <div class="center-block">...</div> Copy code The code is as follows: // Using as a class .center-block { display: block; margin-left: auto; margin-right: auto; } // Using as a mixin .element { .center-block(); } Clear Float Use .clearfix to clear floats of any page element. We used the micro clearfix by Nicolas Gallagher. Can also be used like a mixin. Copy code The code is as follows: <div class="clearfix">...</div> Copy code The code is as follows: // Mixin itself .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Usage as a Mixin .element { .clearfix(); } Show or hide content The .show and .hidden methods can be used to force showing or hiding of any page element (including on screen readers). These two classes use !important to avoid conflicts. These two classes can only be used for block-level elements and can also be used as mixins. .hide still works, but it does not work with screen readers and has been marked as deprecated since v3.0.1. Please use .hidden or .sr-only. Additionally, you can use .invisible to toggle the visibility of only an element, which means its display is not modified and you can still affect elements in the document flow. Copy code The code is as follows: <div class="show">...</div> <div class="hidden">...</div> Copy code The code is as follows: // Classes .show { display: block !important; } .hidden { display: none !important; visibility: hidden !important; } .invisible { visibility: hidden; } // Usage as mixins .element { .show(); } .another-element { .hidden(); } Content for screen readers Use .sr-only to hide an element from all devices except screen readers. This class can also be used as a mixin. Copy code The code is as follows: <a class="sr-only" href="#content">Skip to main content</a> Copy code The code is as follows: // Usage as a Mixin .skip-navigation { .sr-only(); } Image Replacement Use .text-hideclass (also available as a mixin) to replace the text content of a page element with a background image. Copy code The code is as follows: <h1 class="text-hide">Custom heading</h1> Copy code The code is as follows: // Usage as a Mixin .heading { .text-hide(); } Summarize This article mainly talks about some special effects. For example, show and hide, eliminate floating, close buttons, etc. In some cases this may be useful. |
>>: Introduction to vim plugin installation under Linux system
Recommend
WeChat applet development realizes the home page pop-up box activity guidance function
Table of contents 1. Demand 2. Database Design 3....
Tutorial on logging into MySQL after installing Mysql 5.7.17
The installation of mysql-5.7.17 is introduced be...
How to migrate the data directory in Docker
Table of contents View Disk Usage Disk Cleanup (D...
Discussion on default margin and padding values of common elements
Today we discussed the issue of what the margin v...
A brief discussion on which fields in Mysql are suitable for indexing
Table of contents 1 The common rules for creating...
Summary of vue's webpack -v error solution
Xiaobai learned about Vue, then learned about web...
Two ways to build a private GitLab using Docker
The first method: docker installation 1. Pull the...
Comprehensive website assessment solution
<br />Sometimes you may be asked questions l...
Detailed explanation of Vue options
Table of contents 1. What are options? 2. What at...
Box-shadow and drop-shadow to achieve irregular projection example code
When we want to add a shadow to a rectangle or ot...
Detailed steps for developing WeChat mini-programs using Typescript
We don't need to elaborate too much on the ad...
The principle and implementation of two-way binding in Vue2.x
Table of contents 1. Implementation process 2. Di...
Some things to note about varchar type in Mysql
Storage rules for varchar In versions below 4.0, ...
MySQL json format data query operation
The default table name is base_data and the json ...
Several common CSS layouts (summary)
Summary This article will introduce the following...