Powerful Bootstrap component (combined with js)
- 2021-07-07 06:27:07
- OfStack
The last two articles only talked about how to use components, and basically did not say js. This blog should be combined with js
Mainly explain the next few components in 1
1. Modal Box
2. Scroll monitoring
3. Tab page
4. ToolTips
5. Popup Box
Step 6 Button
STEP 7 Stack
8. Rotate pages
9. 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 Box
We usually use this modal box when logging in or reading certain regulations, so modal boxes are very common
First, write a button to open the modal box
<!--data-target It's from our modal box id , data-whatever="@ime" Is the label and value we pass into the modal box -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
Open Modal Box
</button>Then write the modal box
<div class="modal " id="myModal" role="dialog" aria-label="myModalLabel" aria-hidden="true">
<!-- This is a small modal box, which will modal-sm Change to modal-lg Is a large 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">×</span>
</button>
<!-- Title -->
<div class="modal-title">Modal title</div>
</div>
<!-- Modal box content -->
<div class="modal-body">
<!-- Modal box content can be text or table -->
<!--<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 pass the parameters to the table in the modal box,
Add data-label to the button attribute: value
Take the above data-whatever= "@ ime" as an example and add a parameter with the label whatever and the value @ ime
The following is the js operation
// Method of binding modal box display
$("#myModal").on("show.bs.modal",function(e){
// Get the button opened by clicking
var button=$(e.relatedTarget)
// Get the parameters passed in by the button according to the label
var recipient=button.data("whatever")
// Get the modal box itself
var modal=$(this)
// Changes will title Adj. text
modal.find(".modal-title").text("Hello"+recipient);
// Change body Li input Value of
modal.find(".modal-body input").val(recipient)
})
2. Scroll monitoring
Slide to different contents, and the tab selection will change
Write the body attribute first
<
! --offset is set to 70, which is the best value tested--
>
<
body data-spy="scroll" data-target=".navbar" data-offset="70"
>
Then write the tab page
<!-- The tab bar is fixed at the top of the display -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScrollspy">
<ul class="nav navbar-nav">
<!--a The connection in the tag is the id-->
<li><a href="#iwen">iwen</a> </li>
<li><a href="#ime">ime</a> </li>
<!-- Nested drop-down menus in tabs -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Drop-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 id="iwen">@iwen</h2>
<p> This is 1 Individual This is 1 Individual </p>
<h2 id="ime">@ime</h2>
<p> This is 1 Individual This is 1 Individual </p>
<h2 id="one">@one</h2>
<p> This is 1 Individual This is 1 Individual </p>
<h2 id="two">@two</h2>
<p> This is 1 Individual This is 1 Individual </p>
<h2 id="three">@three</h2>
<p> This is 1 Individual This is 1 Individual </p>It is suggested that the content should be written 1 point longer, so that the effect will be more obvious. It is inconvenient to write too many useless words here
You can also write some methods of js
// Method when binding labels are switched
$("#myScrollspy").on("activate.bs.scrollspy",function(e){
alert("hello");
})
3. Tab page
Click on different tabs to display different contents
Write the tab bar first
<ul id="myTab" class="nav nav-tabs">
<!--a Tag links correspond to the following tab-pane Adj. id-->
<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="#" id="myTabdrop1" class="dropdown-toggle" data-toggle="dropdown">
Drop-down menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<!-- Different from the ordinary 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>
Then write the contents of 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>
You can initialize the displayed tabs with js
There are several ways to select tabs
$('#myTabs a[href="#profile"]').tab('show') // Choose by name
$('#myTabs a:first').tab('show') // Select 1 Tab pages
$('#myTabs a:last').tab('show') // Select Last 1 Tab pages
$('#myTabs li:eq(2) a').tab('show') // Select 3 Tabs (because 0 Is the first 1 If it is a tab in the drop-down menu, the number should be added 14. ToolTips
<!--data-target It's from our modal box id , data-whatever="@ime" Is the label and value we pass into the modal box -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
Open Modal Box
</button>Then initialize it with js, otherwise it will have no effect
//Initialize tooltip and point to display
$('[data-toggle="tooltip"]').tooltip();
5. Popup Box
Pop-up boxes are similar to tooltips, but display richer and more common content than tooltips
<!--data-target It's from our modal box id , data-whatever="@ime" Is the label and value we pass into the modal box -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
Open Modal Box
</button>Then initialize with js
//Initialize popover
$(".js-popover").popover();
Step 6 Button
The first two articles are about the basic style of buttons. This time, it is an advanced use, which can make buttons display different text when loading
<!--data-target It's from our modal box id , data-whatever="@ime" Is the label and value we pass into the modal box -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
Open Modal Box
</button>You then bind the click event with js
// Bind button click event
$(".js-loading-btn").on("click", function (e) {
// Click and set to loading Status, display loading Words of
var btn = $(this).button("loading");
// 3s Post-recovery
setTimeout(function (e) {
btn.button("reset")
}, 3000)
})
STEP 7 Stack
Stacking effect can save a lot of screen controls, which is very practical
This is to click the button to open the stack
<!--data-target It's from our modal box id , data-whatever="@ime" Is the label and value we pass into the modal box -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
Open Modal Box
</button>This is the stack of panel groups
<!--data-target It's from our modal box id , data-whatever="@ime" Is the label and value we pass into the modal box -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
Open Modal Box
</button>8. Rotate pages
We can often see it on the homepage of the website
<!--data-target It's from our modal box id , data-whatever="@ime" Is the label and value we pass into the modal box -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
Open Modal Box
</button>You can set intervals and automatic start with js
<!--data-target It's from our modal box id , data-whatever="@ime" Is the label and value we pass into the modal box -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
Open Modal Box
</button>9. Sidebar
The main content of the sidebar is a list
<!-- To set the width, hide it 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
<!--data-target It's from our modal box id , data-whatever="@ime" Is the label and value we pass into the 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 add a little js
$(".js-affixed-element-top").affix({
offset:{
}
})
The basic usage of Boostrap is like this, you can make a good web page after mastering it.