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
Implementation of adding a mask layer effect when the CSS mouse hovers over the image
First look at the effect: When the mouse moves ov...
Detailed explanation of moment.js time and date processing
Monday to Sunday time format conversion (Y --- ye...
Detailed explanation of Linux inotify real-time backup implementation method
Real-time replication is the most important way t...
Input file custom button beautification (demo)
I have written such an article before, but I used...
In-depth analysis of MySQL deadlock issues
Preface If our business is at a very early stage ...
A brief discussion on whether CSS will block page rendering
Maybe everyone knows that js execution will block...
The combination and difference between ENTRYPOINT and CMD in dockerfile
In the previous article [Detailed explanation of ...
What is web design
<br />Original article: http://www.alistapar...
How to install nginx on win10
Because the company asked me to build a WebServic...
How to install MySQL and MariaDB in Docker
Relationship between MySQL and MariaDB MariaDB da...
Steps to install cuda10.1 on Ubuntu 20.04 (graphic tutorial)
Pre-installation preparation The main purpose of ...
Example of building a redis-sentinel cluster based on docker
1. Overview Redis Cluster enables high availabili...
VMware Workstation installation and installation of WIN10 operating system to connect to the external network step by step guide (super detailed tutorial)
First download VMware Workstation 15.1 version. I...
About the problem of vertical centering of img and span in div
As shown below: XML/HTML CodeCopy content to clip...
Basic operations on invisible columns in MySQL 8.0
Table of contents 01 Create invisible columns 02 ...