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/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 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-target is the id of our modal box, and data-whatever="@ime" is the tag and value of the modal box we pass in --><button type="button" data-toggle="modal" data-target="#myModal" data-whatever="@ime"> Open the modal box</button>
Then write the modal box
<div id="myModal" role="dialog" aria-label="myModalLabel" aria-hidden="true"> <!--This is a small modal box. Change modal-sm to modal-lg is a big modal box--> <div> <!--Modal box head--> <div> <!--Close button in the upper right corner--> <button type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <!--Title--> <div>Modal title</div> </div> <!--Modal box content--> <div> <!--Modal frame content can be text or table--> <!--<p>hello</p>--> <form> <div> <label>username</label> <input type="text"> </div> <div> <label>password</label> <input type="password"> </div> </form> </div> <!--Modal frame foot--> <div> <button type="button" data-dismiss="modal"> Close </button> <button type="button"> Save</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </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
The above data-whatever=”@ime” is added as an example. The parameter with the label whatever and the value of @ime is added.
The following is the js operation
// Method $("#myModal").on("show.bs.modal",function(e){// Get the button you click to open var button=$(e.relatedTarget)// Get the parameter passed in by the button var recipient=button.data("whatever")// Get the modal box itself var modal=$(this)// Change the text modal.find(".modal-title").text("Hello"+recipient);// Change the value of input in the body modal.find(".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 displayed content fixed in the tab bar--> <nav role="navigation"> <div> <div id="myScrollspy"> <ul> <!--The connection in the tag is the id of the title below--> <li><a href="#iwen">iwen</a> </li> <li><a href="#ime">ime</a> </li> <!--Nest drop-down menu in the tag--> <li> <a href="#" data-toggle="dropdown"> drop-down menu<span></span> </a> <ul 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> </li> </ul> </div> </div> </nav>
Then write the content
<h2 id="iwen">@iwen</h2><p>This is a person This is a person</p><h2 id="ime">@ime</h2><p>This is a person This is a person</p><h2 id="one">@one</h2><p>This is a person This is a person</p><h2 id="two">@two</h2><p>This is a person This is a person</p><h2 id="three">@three</h2><p>This is a person This is a person</p><h2 id="three">@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
// Method $("#myScrollspy").on("activate.bs.scrollspy",function(e){ alert("hello"); })3. Tag page
Click on different tags to display different content
Write the tag bar first
<ul id="myTab"> <!--a tag link corresponds to the id of the tab-pane below--> <li ><a href="#home" data-toggle="tab">Home</a> </li> <li><a href="#profile" data-toggle="tab">Profile</a> </li> <li> <a href="#" id="myTabdrop1" data-toggle="dropdown"> dropdown menu<span></span> </a> <ul role="menu"> <!-- Unlike ordinary drop-down menus, 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> </li> </ul>
Then write contents of different tags
<div id="myTabContent"> <div id="home"> <p>home</p> <div id="profile"> <p>profile</p> <div id="one"> <p>one</p> <div id="two"> <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 $('#myTabs a:first').tab('show') // Select the first tab page $('#myTabs a:last').tab('show') // Select the last tab page $('#myTabs li:eq(2) a').tab('show') // Select the third tab page (because 0 is the first one). If it is a tab page in the drop-down menu, the number should be added by 1.4. Tooltips
<p> <!--If the title content is empty, the content of data-original-title is displayed. Placement is the display position, which can be set to top|bottom|left|right--> <!--The parameters can be set in the data-****---> Welcome to <a data-animation="false" id="myTooltip" href="#" data-toggle="tooltip" data-placement="bottom" data-original-title="www.jk.com">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 you don't add it, click the button to disappear. If you set it to hover, the button you move is displayed. Remove and disappear --> <!--This pop-up box is titled, and the content is content--> <button type="button" data-trigger="foucus" data-placement="bottom" data-toggle="popover" data-content="content"> pop-up 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 text of the button when loading--> <button type="button" data-loading-text="Loding for 3s"> Loading Status </button>
Then use js to bind the click event
// The click event of the binding button $(".js-loading-btn").on("click", function (e) {// After clicking, set to loading status, displaying the text of loading var btn = $(this).button("loading");// Restore setTimeout(function (e) { btn.button("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
<!--href is the id of the content--> <a data-toggle="collapse" href="#collapseExample">Click to view</a> <div id="collapseExample"> <div> Hello </div> </div>
This is the stack of panel groups
<div id="accordion" role="tablist"> <div> <div role="tab" id="headingOne"> <!--Title displayed--> <h4> <!--Data-parent If the id of the panel-group--> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a> </h4> </div> <!--Add in to open, without hiding--> <div id="collapseOne" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> <div> <div role="tab" id="headingTwo"> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a> </h4> </div> <div id="collapseTwo" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> <div> <div role="tab" id="headingThree"> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a> </h4> </div> <div id="collapseThree" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> </div> </div> </div> </div>
8. Rotating page
We can often see it on the homepage of the website
<div id="carousel-example-generic"> <!--This is the three white circles below indicator--> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!--The content of the rotation page--> <div> <img src="images/4.jpg"> <!--Add text--> <div> <h3>U3D</h3> <p>New version upgrade</p> </div> </div> <div> <img src="images/2.jpg"> <div> <h3>U3D</h3> <p>New product launch</p> </div> </div> <div> <img src="images/3.jpg"> <div> <h3>Apple</h3> <p>Apple</p> </div> </div> <!--The arrows on the left and right of the rotation page--> <a href="#carousel-example-generic" data-slide="prew"> <span></span> </a> <a href="#carousel-example-generic" data-slide="next"> <span></span> </a> </div>
You can set intervals and start automatically with js
//Set the interval to 2s and automatically carousel $(".carousel").carousel({ interval:2000 })9. Sidebar
The main content of the sidebar is a list
<!--To set the width, hide it on the phone screen--> <div> <ul> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> </ul> </div>
Write style again
<style> .affixed-element-top.affix{ /*If you want to be at the bottom, you can change it to bottom:10px;*/ top:10px; } .affixed-element-top.affix-bottom{ position: relative; } </style>Add some js
$(".js-affixed-element-top").affix({ offset:{ } })This is the basic usage of Boostrap. 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 learning and I hope everyone will support Wulin.com more.