Bootstrap Learning Notes CSS components (3) _javascript tips

Today we look at the CSS component effects and the more important classes, these classes are not difficult, the key to master, collocation, use, flexible use. For the first two articles, CSS style and layout of the article, you can read in the previous article.

First, navigation components

I did a navigation, at present only a level menu, the next article, will give a level two menu, related to JS Plug-ins, so this is not described here.

<! DOCTYPE html>  

The effect is as follows:

The navigation class needs to be aware of the following points:

1: The navigation component depends on the Nav class. (That is, you must write this class when you use other classes.)

2: Ensure the accessibility of the navigation component (add role attribute)

3: The classes involved include Nav-tabs, nav-pills (make navigation appear capsules), nav-stacked (make horizontal navigation into vertical navigation), nav-justified (achieve navigation equal width arrangement)

4: For the Disabled class, when you add a link to the navigation page (including tabs and navigation pages), it is only disabled on the surface (color dimmed, mouse shape changes), and the actual function still exists.

5: Navigation using the Drop-down menu.

Let's look at the following: self-labeling test, no more screenshots.

<!--navigation relies on the Nav class Nav-tabs class dependent Nav class--> <ul class= "Nav nav-tabs" > <li role= "Presentation" class= "active" >& Lt;a href= "#" >Home</a></li>---note plus role attribute <li role= "presentation" class= "" ><a href= "#" > profile</a></li> <li role= "presentation" class= "" ><a href= "#" >messages</a></li > </ul> <!--capsule label page vertical arrangement nav-stacked--> <ul class= "nav nav-pills nav-stacked" > <li role= "Presen Tation "class=" active "><a href=" # ">Home</a></li> <li role=" presentation "class=" "><a href= "#" >Profile</a></li> <li role= "presentation" class= "" ><a href= "#" >messages</a
  ></li> </ul> <!--justified navigation nav-justified to achieve navigation--> <ul class= "nav nav-tabs nav-justified" > <li role= "Presentation" class= "active" ><a href= "#" >Home</a></li> <li role= "Presentation" Class= "" ><a href= "#" >profile</a></li> <li role= "Presentation" class= "><a href=" # ">Messages</a></li> </ul> <br>& Lt;br>

Take a look at the navigation of the Drop-down menu:

<ul class= "Nav nav-pills" > <li role= "Presentation" class= "
   dropdown" >
   <a class= " Dropdown-toggle "data-toggle=" dropdown "href=" # "role=" button "aria-haspopup=" true " 
    aria-expanded=" false ">
    dropdown<span class= "caret" ></span>
   </a>
   <ul class= "Dropdown-menu" >
     <li><a href= "#" >Action</a></li>
     <li><a href= "#" >action 111</a></ li>
     <li><a href= "#" >action 222</a></li> <li><a href=
     "#" >Action 333 </a></li>
   </ul>
   </li> 
  <li role= "presentation" class= "divider" ></ Li>--divider Represents the addition of a separator line, which is typically used for empty Li or span <li role= "presentation" class= "><a href=
  " # ">profile </a></li>
  <li role= "presentation" class= "><a href=" # ">Messages</a></li>
  
</ul>

In fact, for the use of Drop-down menu Class dropdown, the basic format is like the above, or you put link a button and so on, flexible use can be.

Second, navigation bar components

Note the point:

1: The navigation bar is to arrange all the components horizontally, package components, similar to the form of horizontal navigation

2: Ensure accessibility. Use <nav> label or <div role= "navigation" >

3: The classes involved in the navigation bar include: navbar-inverse (to achieve background color black and text white effect), Navbar-fixed-top|navbar-fixed-bottom (fixed navigation bar at the top and bottom)

Navbar-left|navbar-right (usually adds navbar-right to the last element), Navbar-text,navbar-link (sets the connection color), navbar-btn (for buttons not included in form form), can

Use this class to achieve vertical center effect), Navbar-form (to achieve vertical alignment effect), Navber-brand (set brand icon), Navbar-collapse (folding)

Let's look at the effect of the navbar-collapse folding, the code is as follows:

<!--navigation bar collapsed--> <nav class= "NavBar navbar-default" > <div class= "Container-fluid" > <di 
    V class= "Navbar-header" >--navigation bar head <button type= "button" class= "Navbar-toggle collapsed" data-toggle= "collapse" data-target= "#bs-example-navbar-collapse-1" aria-expanded= "false" > <span class= "sr-only" >toggle navigatio n</span> <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> </button> <a class= "Navbar-brand" href= "#" > Brand </a&gt
   ; </div> <div class= "collapse navbar-collapse" id= "bs-example-navbar-collapse-1" >--Folding Column <ul class = "Nav navbar-nav" > <li class= "active" ><a href= "#" >link <span class= "Sr-only" &GT;CURRENT&LT;/SPAN&G T;</a></li> <li><a href= "#" >Link</a></li> <li class= "dropdown" > & Lt;a href= "#" class= "Dropdown-toggle "data-toggle=" dropdown "role=" button "aria-haspopup=" true "aria-expanded=" false ">dropdown An class= "caret" ></span></a> <ul class= "Dropdown-menu" > <li><a href= "#" >action </a></li> <li><a href= "#" >another action</a></li> <li><a "#" >something Else here</a></li> <li role= "separator" class= "divider" ></li> <li> <a href= "#" >separated link</a></li> <li role= "separator" class= "divider" ></li> &
    Lt;li><a href= "#" >one more separated link</a></li> </ul> </li> </ul> <form class= "Navbar-form navbar-left" role= "search" > <div class= "Form-group" > <input type= "t Ext "class=" Form-control "placeholder=" Search "> </div> <button type=" Submit "class=" BTN Btn-default " >submit</button> </form> <ul class= "nav navbar-nav navbar-right" > <li><a href= "#" >link</a></li&gt
     ; <li class= "dropdown" > <a href= "#" class= "Dropdown-toggle" data-toggle= "dropdown" role= "button" aria- Haspopup= "true" aria-expanded= "false" >dropdown <span class= "caret" ></span></a> <ul class= "D Ropdown-menu "> <li><a href=" # ">Action</a></li> <li><a href=" # ">another Action</a></li> <li><a href= "#" >something else here</a></li> <li " Separator "class=" divider "></li> <li><a href=" # ">separated link</a></li> < /ul> </li> </ul> </div><!--navbar-collapse folding--> </div> </nav> & lt;! --three transverse--> <div class= "Navbar-header" > <button type= "button" class= "Navbar-toggle collapsed" in button data-to Ggle= "CoLlapse "data-target=" #bs-example-navbar-collapse-1 "aria-expanded=" false "> <span class=" sr-only ">Toggle na vigation</span> <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> <s Pan class= "Icon-bar" ></span> </button> <a class= "Navbar-brand" href= "#" >Brand</a> </di

 V>

The implementation effect is as follows:

That is, when my browser screen shrinks, the original component becomes a collapsed line (three horizontal) to the right of the brand line. Click on the three-horizontal button and the component will be displayed.

Third, paging components

Note the point:

1: Use class pagination (Add Pagination-lg class to make it larger)

2: To achieve the page alignment and the realization of the page is justified (before and after respectively at both ends).

The sticker code is as follows:

<!--pagination class-->
<nav>
  <ul class= "pagination" >
  <li>
   <a href= "#" aria-label= " Previous ">
   <span aria-hidden=" true ">«</span>
   </a>
  </li>
   <li class= "Active" ><a href= "#" >1</a></li>
   <li><a href= "#" >2</a></li>
   <li><a href= "#" >3</a></li>
   <li><a href= "#" >4</a></li>
   <li><a href= "#" >5</a></li>
  <li><a href= "#" aria-label= "Next" >< Span aria-hidden= "true" >»</span></a></li>
  </ul>
</nav>

If the implementation of paging larger directly plus <ul class= "pagination Pagination-lg" > can.

To achieve the effect of paging is as follows: mainly used to pager class

<!--page-->
<nav>
 <ul class= "Pager" >
  <li class= "Active" ><a "#" > previous</a></li>
  <li><a href= "#" >next</a></li> 
 </ul>
</nav>
<!--Add previous class and Next class-->
<nav>
 <ul class= "Pager" >
  < to Zilin separation ends Li class= "previous disabled" ><a href= "#" ><span aria-hidden= "true" >←</span>older</a>< /li>
  <li class= "Next" ><a href= "#" >newer<span aria-hidden= "true" >→</span></a ></li>
 </ul>
</nav>

The above two effects are as follows:

Four, badges

Role: The information is presented in eye-catching numbers.

<!--badge-->
<a href= "#" >inbox<span class= "badge" >42</span></a>
<button class= "btn btn-primary" type= "button" >
 message<span class= "badge" >4</span>
</button>

The effect is as follows:

Add such badge class, also can be used together with navigation and so on.

v. Thumbnail components

Work with grid systems and class thumbnail. The sticker code is as follows: can be tested by oneself

<!--thumbnail thumbnail--> <div class= "Row" > <div class= "col-xs-6 col-md-4" > <div class= "thumbnail" &
     Gt  <div class= "caption" >  

Six, can be closed the warning box

Use class: Alert-dismissible and a button sticker are as follows:

<!--provides a close button for the warning box-->
<div class= "alert alert-warning alert-dismissible" role= "alert" >
 <button Type= ' button ' class= ' Close ' data-dismiss= ' alert ' aria-label= ' close ' >
  <span ' true ' aria-hidden= Span>--Add Aria-hidden property
 </button>
 <strong>warning</strong>better Check yourself,you Are not looking too good.
</div>
<!--data-dismiss= "alert" to ensure proper behavior on all devices-->

About the scenery, you can replace. No longer described. Set Alert-link to set the color that matches the current warning box.

Vii. progress bar

Using classes: progress and implementing the progress bar for animations

<!--progress bar-->
<div class= "Progress" > <div class= "progress-bar"
  role= "ProgressBar" aria-valuenow= "aria-valuemax=" aria-valuemin= "0" 
  style= "width:60%;" >
   60%
  </div>
</div>
<!--set minimum width-->
<div class= "Progress" >
  <div class= "Progress-bar progress-bar-success" role= "ProgressBar" aria-valuenow= "0 
   " aria-valuemin= " aria-valuemax= "style=" width:80%; >80%
  </div>
  
</div>
<div class= "Progress" >
  <div class= "Progress-bar" Role= "ProgressBar" aria-valuenow= "2" aria-valuemin= "0" aria-valuemax= "" style= "Min-width:2em" 
   ; >2%
 </div>

</div>

To achieve the animation effect of the progress bar, the stripe of the progress bar using progress-bar-striped, to achieve animation effect plus active can be. Paste code as follows: No more screenshots

<!--stripe class using progress-bar-striped-->
<div class= "Progress" >
  <div class= "Progress-bar" Progress-bar-success progress-bar-striped Active "role=" ProgressBar "aria-valuenow=" aria-valuemin= " 
   0" aria-valuemax= "style=" "width:100%" >
   <span class= "sr-only" >40% complete</span>100%
  < /div>
</div>

You can also combine the scenery and change the color of the stripes of the progress bar.

Eight, List group, enter Group component

First look at the list group, mainly used in the List-group class, followed by the list of items with List-group-item to write. The sticker code is as follows:

<!--list group--> <ul class= "List-group" > <li class= "list-group-item" ><span class= "badge" >3</
  span>1111</li> <li class= "List-group-item" ><span class= "badge" >5</span>2222</li> <li class= "List-group-item" >3333</li> <li class= "List-group-item" >4444</li> <li class= " List-group-item ">5555</li> </ul> <!--link as a list group you can also add a story class--> <div class=" List-group "> <a href= "#" class= "List-group-item Active" >2222</a> <a href= "#" class= "List-group-item disabled" >33333 </a> <a href= "#" class= "list-group-item-success" >44444</a> <a href= "#" class= " List-group-item-info ">55555</a> </div> <!--button as a list group, use Div, cannot use. btn class--> <div class="
 List-group "> <button type=" button "class=" List-group-item list-group-item-warning ">1111</button> <button type= "button" class= "List-group-item-danger" >2222</button> <buttoN type= "button" class= "list-group-item-success" >3333</button> <button type= "button" class= " List-group-item-info ">4444</button> </div> <!--list Group customization content--> <div class=" List-group "> <a href= "#" class= "List-group-item active" > 
 

Take a look at the input group and use the Input-group class to wrap the components together. The sticker code is as follows:

<!--input group-->
<div class= "Input-group" >--Components are included in Inout-group <span class=
  "Input-group-btn" >
   <button class= "btn btn-primary" type= "button" >Go</button>
  </span>
  <input Type= "text" class= "Form-control" aria-label= "text" >
</div>

Ix. embedded content of response characteristics

Understand what it means, what is embedded content? How do I embed it? And how do we respond?

Embedding: The use of <iframe>, <embed>, <video> and <object> tags to introduce external file content. Believe that the new attributes in HTML5 are known to all. Video,radio ET

Response: Automatically creates a fixed proportion based on the width of the external container of the embedded content, allowing the browser to automatically determine the size of the video or content, and to scale on a variety of devices.

If you want the final style to match other properties, you can also explicitly use a derived. Embed-responsive-item class.

The sticker code is as follows:

<div class= "Embed-responsive embed-responsive-16by9" > <iframe class= "embed-responsive-item" src= "...
  " ></iframe>
</div>
<div class= "embed-responsive embed-responsive-4by3" >
  < iframe class= "Embed-responsive-item" src= "..." ></iframe>
</div>

Let's see what Embed-responsive-16by9 and embed-responsive-4by3 respectively mean.

Let's take a look at the mode console:

. embed-responsive-4by3 {---4 represents the horizontal, 3 represents vertical, that is, a scaling ratio, that is, a scale of 4:3
 padding-bottom:75%;
embed-responsive-16by9 {
 padding-bottom:56.25%;
}

Keep the aspect ratio, width in 100%, then 100% * 3/4=75%, at this time by setting its padding-botom to set its aspect ratio. When you zoom the browser, you start

Finally, the zoom scale is maintained.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.