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
Detailed explanation of CSS complex selectors and CSS font styles and color attributes
I have learned some basic selectors of CSS before...
Solution to css3 transform transition jitter problem
transform: scale(); Scaling will cause jitter in ...
Linux uses dual network card bond and screwdriver interface
What is bond NIC bond is a technology that is com...
css3 flex layout justify-content:space-between the last line is aligned to the left
When using justify-content:space-between layout, ...
This article tells you how to use event delegation to implement JavaScript message board function
Use event delegation to implement message board f...
Linux implements the source code of the number guessing game
A simple Linux guessing game source code Game rul...
Mysql 5.6 "implicit conversion" causes index failure and inaccurate data
background When performing a SQL query, I tried t...
Detailed explanation of Vue components
<body> <div id="root"> <...
Detailed explanation of the use of ElementUI in Vue
Login + sessionStorage Effect display After a suc...
The problem of jquery.form.js denying access in IE and the input upload button must be actively clicked
Let's take a look at the code first <form ...
Native JS to implement drag position preview
This article shares with you a small Demo that ad...
Detailed explanation of the implementation of regular backup of MySQL database tables
Implementation of regular backup of Mysql databas...
vmware virtual machine ubuntu18.04 installation tutorial
Installation Steps 1. Create a virtual machine 2....
HTML uses regular expressions to test table examples
Here is an example code for using regular express...
Docker deploys Macvlan to achieve cross-host network communication
Basic concepts: Macvlan working principle: Macvla...