On the two article only said how to use the components, basically did not say JS, this blog to be combined with JS speaking
Mainly explain a few components
1. Modal frame
2. Rolling Monitor
3. Label page
4. Tool Tips
5. Pop-up box
6. Button
7. Stacking
8. Rotation page
9. Side Sidebar
First import CSS and JS
<link rel= "stylesheet" type= "Text/css" href= "Css/bootstrap.min.css" > <link rel= "stylesheet" href= " // Cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css "> <script src=" Js/jquery-3.1.0.min.js "></ script> <script src= "Js/bootstrap.min.js" ></script>
1. Modal frame
We usually use this modal box when we sign in or read some regulations, so the modal boxes are very common.
First, write a button that opens the modal box
<!--Data-target is the id,data-whatever= "@ime" of our modal box is the label and value of our incoming modal box--> <button type= "button class=" btn Btn-primary btn-lg "data-toggle=" modal "data-target=" #myModal "data-whatever=" @ime "> open Modal Box </ Button>
And then write the modal box
<div class= "modal" id= "Mymodal" role= "dialog" aria-label= "Mymodallabel" aria-hidden= "true" > <!--this is a small modal box, Convert Modal-sm to Modal-lg is a large modal frame--> <div class= "Modal-dialog modal-sm" > <div class= "modal-content" > ;! --modal frame head--> <div class= "Modal-header" > <!--the Close button in the upper right corner--> <button type= "button" class= ' Close ' data-dismiss= ' modal ' aria-label= ' close ' > <span aria-hidden= ' true ' >x</span> </b
utton> <!--title--> <div class= "Modal-title" >modal title</div> </div> <!--modal box content--> <div class= "Modal-body" > <!--modal box contents can be text or form--> <!--<P>HELLO&L t;/p>--> <form> <div class= "Form-group" > <label class= "Control-label" &G t;username</label> <input class= "Form-control" type= "text" > </div> <d
IV class= "Form-group" > <label class= "Control-label" >password</label> <input class= "Form-control" type= "PASSW" Ord "> </div> </form> </div> <!--modal frame foot--> <div class=" mod Al-footer "> <button type=" button "class=" btn Btn-default "data-dismiss=" modal "> Close & lt;/button> <button type= "button" class= "Btn btn-primary" > Save </button> ;/div> </div> </div> </div>
If you click on the button and then pass the parameter to the form in the Modal box,
To add a data-label to the properties of a button: value
With the above data-whatever= "@ime" as an example, add a label of whatever, the value of @ime parameters
Here is the JS operation
The binding modal box shows the method
$ ("#myModal"). On ("Show.bs.modal", function (e) {
// Get click on the Open button
var button=$ ( E.relatedtarget)
/// According to the label get button incoming parameter
var recipient=button.data ("whatever")
// get modal box itself
var modal=$ (this)
// Change the text
modal.find (". Modal-title") of title. Text ("Hello" +recipient); change the value of input in the body
modal.find (". Modal-body input"). Val (recipient)
})
2. Rolling Monitor
Slide to different content, tab selection will change
First write the Body property
<!--offset set to 70, this value is tested best Value-->
<body data-spy= "Scroll" data-target= "NavBar" data-offset= ">"
Then write the tab page
<!--tab bar fixed display content top--> <nav class= "NavBar navbar-default navbar-fixed-top" role= "navigation" > <div
class= "Container-fluid" > <div class= "collapse navbar-collapse js-navbar-scrollyspy" id= "Myscrollspy" > The connection in the <ul class= "Nav navbar-nav" > <!--a label is the id--> <li><a href= "of the title below #iwen ">iwen</a> </li> <li><a href=" #ime ">ime</a> </li> <!--in superscript Nested drop-down menu in check page--> <li class= "dropdown" > <a href= "#" class= "Dropdown-toggle" data-toggle= "
Dropdown "> Pull-down menu <span class=" Caret "></span> </a> <ul class= "Dropdown-menu" role= "menu" > <li><a href= "#one" tabindex= "-1" >one</ a> </li> <li><a href= "#two" tabindex= "-1" >two</a> </li> & Lt;li><a href= "#thRee "tabindex="-1 ">three</a> </li> </ul> </li> </ul>
</div> </div> </nav>
and write the content.
<H2 id= "Iwen" > @iwen
It is suggested that the content should be written a little longer, so that the effect will be more obvious, it is not convenient to write too much useless text
You can also write a few JS methods
Method
$ ("#myScrollspy") for binding label switching. ON ("Activate.bs.scrollspy", function (e) {
alert ("Hello");
})
3. Label page
Click on a different tab to display different content
First write the tab bar
<ul id= "Mytab" class= "Nav nav-tabs" >
<!--a label link corresponds to Tab-pane id--> <li
"#home" below ><a data-toggle= "tab" >Home</a> </li>
<li><a href= "#profile" data-toggle= "tab" >profile </a> </li>
<li class= "dropdown" >
<a href= "#" id= "MyTabdrop1" class= "Dropdown-toggle" data-toggle= "dropdown" >
pull-down menu
<span class= "caret" ></span>
</a>
<ul class= "Dropdown-menu" role= "menu" >
<!--is different from the normal Drop-down menu, add data-toggle= "tab"-->
<li><a href= "#one" tabindex= "-1" data-toggle= "tab" >one</a> </li>
<li><a href= "#two" tabindex= "-1" data-toggle= "tab" >two</a> </li>
</ul>
</li>
</ul>
and write different labels.
<div id= "mytabcontent" class= "tab-content" >
<div class= "Tab-pane fade" id= "Home" >
<p>home </p>
<div class= "Tab-pane fade" id= "Profile" >
<p>profile</p>
<div class= " Tab-pane fade "id=" one ">
<p>one</p>
<div class=" Tab-pane fade "id=" two ">
<p> Two</p>
Can initialize the displayed label page with JS
There are several ways to select a tab page
$ (' #myTabs a[href= ' #profile] '). tab (' Show ')//select
$ (' #myTabs A:first ') by name. Tab (' Show ')//Select first tab
$ (' # Mytabs a:last '). tab (' Show ')//Select Last tab
$ (' #myTabs Li:eq (2) a '). tab (' Show ')//Select a third tab (since 0 is the first), if it is a tab in the Drop-down menu, You need to add 1 to the number.
4. Tool Tips
<p>
<!--If the title content is empty, display the contents of the Data-original-title, placement for the displayed position, can be set to top|bottom|left|right-->
<!--parameters can be set in data-****-->
Welcome to <a data-animation= "false" id= "Mytooltip" href= "#" data-toggle= "tooltip "title=" title "
data-placement=" Bottom "data-original-title=" www.jk.com ">jack ' s page</a>
</p >
Then initialize with JS, otherwise there will be no effect
Initializes the tooltip, pointing to the display
$ (' [data-toggle= ' tooltip] '). tooltip ();
5. Pop-up box
A pop-up box is similar to a ToolTip, but the content is richer than the ToolTip and is more commonly used
<!--data-trigger= "Foucus" click Blank can disappear, not add words click the button disappears, set for hover mouse move button display, remove away-->
<!--this pop-up box title is titled, Content is content-->
<button type= "button" class= "btn Btn-default" Js-popover "data-trigger=" data-placement= "Bottom" data-toggle= "PopOver" title= "title" data-content= "Content" >
pop-up box
</button >
And then you want to initialize it with JS
Initialize PopOver
$ (". Js-popover"). PopOver ();
6. Button
The first 2 is about the basic style of the button, this time is advanced use, you can make the button to load the display of different text
<!--can set the text of the button at loading-->
<button type= "button" data-loading-text= "loding for 3s" class= "btn Btn-primary js-loading-btn ">
loading Status
</button>
Then use JS to bind the event to the point
Click event for Binding button
$ (". Js-loading-btn"). On ("click", Function (e) {
// Click Loading state to display loading text
var btn = $ (this). Button ("Loading"); 3s recovery
settimeout (function (e) {
Btn.button ("Reset")
}, 3000)
})
7. Stacking
Stacking effects can save a lot of screen controls, very useful
This is the Click button to open the stack
<!--href for id-->
<a class= "btn btn-primary" data-toggle= "collapse" href= "#collapseExample" > Click to view </a>
<div class= "collapse" id= "Collapseexample" >
<div class= "OK" >
Hello
</ Div>
</div>
This is the stack of panel groups
<div class= "Panel-group" id= "accordion" role= "tablist" > <div class= "Panel Panel-default" > <div C
lass= "panel-heading" role= "tab" id= "Headingone" > <!--displayed title-->
8. Rotation page
We can often see on the homepage of the website
<div id= "Carousel-example-generic" class= "Carousel Slide" > <!--this is the following three white round indicator--> <ol "c Arousel-indicators "> <li data-target=" #carousel-example-generic "data-slide-to=" 0 "class=" active "></li > <li data-target= "#carousel-example-generic" data-slide-to= "1" ></li> <li data-target= "#caro Usel-example-generic "data-slide-to=" 2 "></li> </ol> <!--rotation page content--> <div class=" Carousel
-inner "> <div class=" Item Active "> <!--Add text--> <div class= "Carousel-caption" >
You can set the interval and auto start with JS
Set interval 2s and auto carousel
$ (". Carousel"). Carousel ({
interval:2000
})
9. Side Sidebar
The main side of the sidebar is a list
<!--to set width, hide-->
<div class= "col-md-3 col-sm-4 hidden-xs" > <ul class= "on the phone screen list-group
Affixed-element-top js-affixed-element-top ">
<a href=" # "class=" List-group-item ">hello</a>
<a href= "#" class= "List-group-item" >hello</a>
<a href= "#" class= "List-group-item" > hello</a>
<a href= "#" class= "List-group-item" >hello</a>
<a href= "#" class= " List-group-item ">hello</a>
<a href=" # "class=" List-group-item ">hello</a>
<a href= "#" class= "List-group-item" >hello</a>
<a href= "#" class= "List-group-item" >hello</a >
</ul>
</div>
Write Style again
<style>
affixed-element-top.affix{
/* If you want to be at the bottom, you can change to bottom:10px;*/
top:10px
. affixed-element-top.affix-bottom{
position:relative;
}
</style>
and add some JS
$ (". Js-affixed-element-top"). Affix ({
offset:{
}
})
The basic usage of boostrap is so, after mastering can make very good webpage.
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
