The previous two articles only talk about how to use components, basically not about js. This blog should be discussed in combination with js.
Let me explain several components
1. Modal Box
2. Scroll monitoring
3. Tag page
4. Tooltips
5. Pop-up box
6. Button
7. Stacking
8. Rotating page
9. Sidebar
Import css and js first
<link rel="stylesheet" type="text/css" href="css/"> <link rel="stylesheet" href="///bootstrap/3.3.5/css/"> <script src="js/jquery-3.1."></script> <script src="js/"></script>
1. Modal Box
We usually use this modal box when logging in or reading certain regulations, so modal box is very common
First write a button to open the modal box
<!--data-targetIt's our modal boxid，data-whatever="@ime"It is the label and value we pass in the modal box--> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime"> Open the modal box </button>
Then write the modal box
<div class="modal " role="dialog" aria-label="myModalLabel" aria-hidden="true">
<!--This is a small modal box，Willmodal-smChange tomodal-lgIt's a big modal box-->
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!--Modal frame head-->
<div class="modal-header">
<!--Close button in the upper right corner-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<!--title-->
<div class="modal-title">Modal title</div>
</div>
<!--Modal box content-->
<div class="modal-body">
<!--Modal box content可以是文字或表格-->
<!--<p>hello</p>-->
<form>
<div class="form-group">
<label class="control-label">username</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label class="control-label">password</label>
<input class="form-control" type="password">
</div>
</form>
</div>
<!--Modal frame foot-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
save
</button>
</div>
</div>
</div>
</div>
If you click the button and then pass parameters to the table in the modal box
Add data-label to the attribute of the button: value
Abovedata-whatever=”@ime”For example, a parameter with the label whatever and the value @ime is added
The following is the js operation
// Method for binding modal box display $("#myModal").on("",function(e){
// Get the button to click on it var button=$()
// Obtain the parameters passed in the button according to the label var recipient=("whatever")
// Get the modal box itself var modal=$(this)
// Change the text that will title (".modal-title").text("Hello"+recipient);
// Change the input value in the body (".modal-body input").val(recipient)
})
2. Scroll monitoring
Slide to different contents, the tab page will change
First write the body attribute
<!--offset is set to 70, this value is the best value tested -->
<body data-spy="scroll" data-target=".navbar" data-offset="70">
Then write the tab
<!--The top of the display content fixed by the tab bar-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse js-navbar-scrollyspy" >
<ul class="nav navbar-nav">
<!--aThe connection in the tag is in the title belowid-->
<li><a href="#iwen">iwen</a> </li>
<li><a href="#ime">ime</a> </li>
<!--Nesting drop-down menus in tabs-->
<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>
<li><a href="#three" tabindex="-1">three</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Then write the content
<h2 >@iwen</h2> <p>This is a person This is a person</p> <h2 >@ime</h2> <p>This is a person This is a person</p> <h2 >@one</h2> <p>This is a person This is a person</p> <h2 >@two</h2> <p>This is a person This is a person</p> <h2 >@three</h2> <p>This is a person This is a person</p>
It is recommended to write the content longer so that the effect will be more obvious. It is not convenient to write too many useless words here.
You can also write some js methods
// Methods when binding tag switching $("#myScrollspy").on("",function(e){
alert("hello");
})
3. Tag page
Click on different tags to display different content
Write the tag bar first
<ul class="nav nav-tabs">
<!--aTag link corresponds to the followingtab-paneofid-->
<li ><a href="#home" data-toggle="tab">Home</a> </li>
<li><a href="#profile" data-toggle="tab">Profile</a> </li>
<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">
<!--与普通Pull-down menu不同，Want to adddata-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>
Then write contents of different tags
<div class="tab-content">
<div class="tab-pane fade" >
<p>home</p>
<div class="tab-pane fade" >
<p>profile</p>
<div class="tab-pane fade" >
<p>one</p>
<div class="tab-pane fade" >
<p>two</p>
You can initialize the displayed tab page with js
There are several ways to select a tab page
$('#myTabs a[href="#profile"]').tab('show') // Select by name$('#myTabs a:first').tab('show') // Select the first tab page$('#myTabs a:last').tab('show') // Select the last tab$('#myTabs li:eq(2) a').tab('show') // Select the third tab（because0It's the first），If it is a tab in the drop-down menu，Numbers need to be added1
4. Tooltips
<p>
<!--liketitleIf the content is empty, it will be displayeddata-original-titleContents，placementThe location displayed，Can be set astop|bottom|left|right-->
<!--The parameters can bedata-****Settings of the method-->
Welcome<a data-animation="false" href="#" data-toggle="tooltip" title="title"
data-placement="bottom" data-original-title="">jack's page</a>
</p>
Then you need to initialize it with js, otherwise it will have no effect
//Initialize tooltip, point to display
$('[data-toggle="tooltip"]').tooltip();
5. Pop-up box
The pop-up box is similar to a tooltip, but it displays more richer than the tooltip and is also more commonly used.
<!--data-trigger="foucus"Click the blank to disappear，If not added, click the button to disappear，Set ashoverIf the mouse moves the button，Remove and disappear-->
<!--The pop-up box is titledtitle，The content iscontent-->
<button type="button" class="btn btn-default js-popover" data-trigger="foucus" data-placement="bottom" data-toggle="popover" title="title" data-content="content">
Popup box
</button>
Then initialize it with js
// Initialize popover
$(".js-popover").popover();
6. Button
The first two articles talk about the basic style of buttons. This time it is advanced, allowing buttons to display different text when loading.
<!--You can set the button inloadingThe text of time-->
<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 click event
// Click event for binding button $(".js-loading-btn").on("click", function (e) {
// After clicking, set it to loading status, displaying the loading text var btn = $(this).button("loading");
// Recover after 3 seconds setTimeout(function (e) {
("reset")
}, 3000)
})
7. Stacking
Stacking effect can save a lot of screen controls, which is very practical
This is to click the button to open the stack
<!--hrefTo display contentid-->
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">Click to view</a> <div class="collapse" >
<div class="well">
Hello
</div>
</div>
This is the stack of panel groups
<div class="panel-group" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" role="tab" >
<!--The title displayed-->
<h4 class="panel-title">
<!--data-parentifpanel-groupofid-->
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a>
</h4>
</div>
<!--addinIndicates that it is open，Hide without indicating-->
<div class="panel-collapse collapse in" role="tabpanel">
<div class="panel-body">
Hello<br>
Hello<br>
Hello<br>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" >
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a>
</h4>
</div>
<div class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
Hello<br>
Hello<br>
Hello<br>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" >
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a>
</h4>
</div>
<div class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
Hello<br>
Hello<br>
Hello<br>
</div>
</div>
</div>
</div>
8. Rotating page
We can often see it on the homepage of the website
<div class="carousel slide">
<!--These are the three white circles belowindicator-->
<ol class="carousel-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="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!--Contents of rotation pages-->
<div class="carousel-inner">
<div class="item active">
<img src="images/">
<!--Add text-->
<div class="carousel-caption">
<h3>U3D</h3>
<p>New version upgrade</p>
</div>
</div>
<div class="item ">
<img src="images/">
<div class="carousel-caption">
<h3>U3D</h3>
<p>New products are available online</p>
</div>
</div>
<div class="item ">
<img src="images/">
<div class="carousel-caption">
<h3>Apple</h3>
<p>Applewatch</p>
</div>
</div>
</div>
<!--Arrows on the left and right of the rotation page-->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prew">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
You can set intervals and start automatically with js
//Set the interval to 2s and automatically rotate $(".carousel").carousel({
interval:2000
})
9. Sidebar
The main content of the sidebar is a list
<!--To set width，Hide on the phone screen-->
<div class="col-md-3 col-sm-4 hidden-xs">
<ul class="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>
.{
/*If you want to be at the bottom, you can change it to bottom:10px;*/
top:10px;
}
.-bottom{
position: relative;
}
</style>
Add some js
$(".js-affixed-element-top").affix({
offset:{
}
})
This is the basic usage of Bootstrap. After mastering it, you can create a good web page.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.