Bootstrap
Modal Box
Be careful:
1. The pop-up layer must be placed in the body
2. No more layers can be nested inside the pop-up layer
3. When the pop-up layer comes out, the scrollbar of the page will be overwritten
- modal pop-up parent
- modal-dialog pop-up layer
- Content area of modal-content pop-up layer
- Head area of modal-header pop-up layer
- Main area of modal-body pop-up layer
- Bottom area of modal-footer pop-up layer
- fade gives the pop-up layer a moving effect that is added to the parent of the pop-up layer
The sample code is as follows:
The modal box has size, the modal-lg large mode box, the modal-sm small mode box, and the default is the medium mode box.
<div class="container">
<div class="row">
<button class="btn btn-primary" data-toggle="modal" data-target=".myModal1">Pop up a small layer</button>
<button class="btn btn-primary" data-toggle="modal" data-target=".myModal2">Pop up a large layer</button>
<button class="btn btn-primary" data-toggle="modal" data-target=".myModal3">Pop up a small layer</button>
</div>
</div>
<div class="modal fade myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>Love Qiu Yan</h4>
</div>
<div class="modal-body">
<p>Love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn
<p>Love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="modal myModal2">
<div class="modal-dialog modal-lg"><!--modal-lg is used to set the size of the pop-up layer, it must be given to the modal-dialog layer-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>Love Qiu Yan</h4>
</div>
<div class="modal-body">
<p>love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumnAutumn love Autumn love Autumn love Autumn love Autumn love Autumn love Autumn love </p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="modal myModal3">
<div class="modal-dialog modal-sm"><!--modal-lg is used to set the size of the pop-up layer, it must be given to the modal-dialog layer-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>Love Qiu Yan</h4>
</div>
<div class="modal-body">
<p>love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumn,love autumnAutumn love Autumn love Autumn love Autumn love Autumn love Autumn love Autumn love </p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Scroll Listening
Steps:
1. To scroll, add data-spy="scroll" to it, and add a data-target that is associated with the parent of the navigation
2. Add an id or class to the parent of the navigation to match the value of the data-target of the element to scroll, and add a class of navbar-collapse
3. Each a-tag in the navigation needs to have an anchor link added so that it can scroll up to the top
4. The title of the content in the scrolling area should be added with the corresponding id to correspond to the anchor link of the navigation
The sample code is as follows:
The code below is taken from the Bootstrap website and needs to be styled for scroll monitoring, otherwise it is ineffective and not very easy to use.
<style> #subNav{ position: fixed; top: 0; } .nav a{ color: #666; } .nav ul{ display: none; } .nav .active ul{ display: block; padding-left: 20px; } .nav > li > a { padding: 5px 15px; } .nav .active > a{ color: #f00; border-left: 1px solid #f00; } .nav .active .bold{ font-weight: bold; border-left: 3px solid #f00; font-size: 20px; } </style> <div class="container"> <div class="row"> <!-- Here's a padding Value is for the following, you can try to remove the effect --> <div class="col-lg-9" style="padding-bottom: 500px;"> <div class="section"> <h2 id="gaishu">overview</h2> <h3 id="dange">Single or full introduction</h3> <p>JavaScript Plug-ins can be introduced individually (using Bootstrap Single provided <code>*.js</code> File), or all at once (using <code>bootstrap.js</code> Or compressed <code>bootstrap.min.js</code>). </p> <p>Compressed version is recommended JavaScript file bootstrap.js and bootstrap.min.js All plug-ins are included, and when you use them, you just need to select an introductory page.</p> <p>Dependencies between plug-ins Some plug-ins and CSS Components depend on other plug-ins.If you are introducing each plug-in individually, be sure to check the dependencies between the plug-ins in the documentation.Note that all plug-ins depend on jQuery (In other words, jQuery Pages must be introduced before all plug-ins. bower.json Listed in the file Bootstrap Supported jQuery Edition.</p> <h3 id="datashuxing">data attribute</h3> <p>You can just pass data attribute API Can use all Bootstrap Plugin, no need to write a line JavaScript Code.This is Bootstrap First class in API，It should also be your preferred method.</p> <p>In other words, in some cases this function may need to be turned off.Therefore, we also provide a shutdown data attribute API The method is to remove the data-api Events that are namespaces and bound to documents.Like the following:</p> <p> <pre>$(document).off('.data-api')</pre> </p> <p>Additionally, if you are targeting a particular plug-in, you only need to data-api The name of the plug-in added earlier as the namespace is as follows:</p> <p> <pre>$(document).off('.alert.data-api')</pre> </p> <h3 id="biancheng">Programmatic API</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> <h3 id="bimian">Avoid Namespace Conflicts</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> <h3 id="shijian">Event</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> <h3 id="weidui">Not disabled JavaScript Remedy provided by browsers</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> </div> <div class="section"> <h2 id="guodu">Transition effect</h2> <h3 id="guanyu">About Transition Effect</h3> <p>JavaScript Plug-ins can be introduced individually (using Bootstrap Single provided <code>*.js</code> File), or all at once (using <code>bootstrap.js</code> Or compressed <code>bootstrap.min.js</code>). </p> <p>Compressed version is recommended JavaScript file bootstrap.js and bootstrap.min.js All plug-ins are included, and when you use them, you just need to select an introductory page.</p> <p>Dependencies between plug-ins Some plug-ins and CSS Components depend on other plug-ins.If you are introducing each plug-in individually, be sure to check the dependencies between the plug-ins in the documentation.Note that all plug-ins depend on jQuery (In other words, jQuery Pages must be introduced before all plug-ins. bower.json Listed in the file Bootstrap Supported jQuery Edition.</p> <h3 id="baohan">Included Content</h3> <p>You can just pass data attribute API Can use all Bootstrap Plugin, no need to write a line JavaScript Code.This is Bootstrap First class in API，It should also be your preferred method.</p> <p>In other words, in some cases this function may need to be turned off.Therefore, we also provide a shutdown data attribute API The method is to remove the data-api Events that are namespaces and bound to documents.Like the following:</p> <p> <pre>$(document).off('.data-api')</pre> </p> <p>Additionally, if you are targeting a particular plug-in, you only need to data-api The name of the plug-in added earlier as the namespace is as follows:</p> <p> <pre>$(document).off('.alert.data-api')</pre> </p> </div> <div class="section"> <h2 id="shili">Example</h2> <h3 id="jingtai">Static instances</h3> <p>JavaScript Plug-ins can be introduced individually (using Bootstrap Single provided <code>*.js</code> File), or all at once (using <code>bootstrap.js</code> Or compressed <code>bootstrap.min.js</code>). </p> <p>Compressed version is recommended JavaScript file bootstrap.js and bootstrap.min.js All plug-ins are included, and when you use them, you just need to select an introductory page.</p> <p>Dependencies between plug-ins Some plug-ins and CSS Components depend on other plug-ins.If you are introducing each plug-in individually, be sure to check the dependencies between the plug-ins in the documentation.Note that all plug-ins depend on jQuery (In other words, jQuery Pages must be introduced before all plug-ins. bower.json Listed in the file Bootstrap Supported jQuery Edition.</p> <h3 id="dongtai">Dynamic Instances</h3> <p>You can just pass data attribute API Can use all Bootstrap Plugin, no need to write a line JavaScript Code.This is Bootstrap First class in API，It should also be your preferred method.</p> <p>In other words, in some cases this function may need to be turned off.Therefore, we also provide a shutdown data attribute API The method is to remove the data-api Events that are namespaces and bound to documents.Like the following:</p> <p> <pre>$(document).off('.data-api')</pre> </p> <p>Additionally, if you are targeting a particular plug-in, you only need to data-api The name of the plug-in added earlier as the namespace is as follows:</p> <p> <pre>$(document).off('.alert.data-api')</pre> </p> <h3 id="kexuan">Optional size</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> <h3 id="jinzhi">Prohibit animation effects</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> <h3 id="yongfa">usage</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> <h3 id="tongguo1">adopt data attribute</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> <h3 id="tongguo">adopt JavaScript call</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> <h3 id="canshu">parameter</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> <h3 id="fangfa">Method</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> <h3 id="shijian2">Event</h3> <p>For all of us Bootstrap Plug-ins provide pure JavaScript Modal API. All public API Are collections of elements that support separate or chained calls and return what they do (Note: and jQuery The calls are consistent).</p> <p>$('.btn.danger').button('toggle').addClass('fat')</p> <p>All methods can accept an optional option Object as a parameter, or a string representing a particular method, or nothing is provided (in which case, the plug-in will be initialized with default values):</p> </div> </div> <div class="col-lg-3"> <div id="subNav" class="navbar-collapse"> <ul class="nav"> <li> <a href="#Gaishu "class=" bold ">overview</a> <ul class="nav"> <li><a href="#Dange'> single or all introduced </a></li> <li><a href="#Datashuxing ">data attribute </a> </li> <li><a href="#Biancheng ">Programming API</a></li> <li><a href="#Bimian ">Avoid Namespace Conflicts </a></li> <li><a href="#Shijian ">Event</a></li> <li><a href="#Weidui'> does not provide remedies for browsers that disable JavaScript </a></li> </ul> </li> <li> <a href="#Guodu "class=" bold ">transition effect </a> <ul class="nav"> <li><a href="#Guanyu ">About Transition Effect </a></li> <li><a href="#Baohan "> contains </a> </li> </ul> </li> <li> <a href="#Shili "class=" bold ">instance</a> <ul class="nav"> <li><a href="#Jingtai ">static instance </a> </li> <li><a href="#Dongtai ">dynamic instance </a></li> <li><a href="#Kexuan "> optional size </a> </li> <li><a href="#Jinzhi ">Prohibit animation effect </a></li> <li><a href="#Yongfa'> Usage </a> </li> <li><a href="#Tongguo1 "> via data attribute </a> </li> <li><a href="#Tongguo'>Call through JavaScript </a></li> <li><a href="#Canshu'> parameter </a> </li> <li><a href="#Fangfa'> method </a> </li> <li><a href="#Shijian2 ">Event</a></li> </ul> </li> </ul> </div> </div> </div> </div>
Tip Label
On the a tag, you can add a hint, you need to add a title attribute, and you can put a hint inside.However, there are more effects in Bootstrap where you can change the display direction, but you need js code.
- data-placment="top(bottom) (left) (right)" determines the direction in which the label will pop up
The sample code is as follows:
<style> p{ margin: 200px 0; } </style> <div class="container"> <div class="row"> <p><a href="#" class="tool" data-toggle="tooltip" data-placement="top" title="I love you">Brilliant Autumn</a>Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program<a href="#" class="tool" data-toggle="tooltip" data-placement="right" title="I love you">Brilliant Autumn</a>Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program<a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="I love you">Brilliant Autumn</a>Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program Ape Love Program<a href="#"Class=" tool "data-toggle=" tooltip "data-placement=" left "title=I love you">Aiqiu Yan</a>Program Ape Love Program Lady</p> </div> <div class="row"> <button class="btn btn-primary tool" data-toggle="tooltip" title="code" data-placement="top">code</button><br /><br /> <button class="btn btn-primary tool" data-toggle="tooltip" title="code" data-placement="right">code</button><br /><br /> <button class="btn btn-primary tool" data-toggle="tooltip" title="code" data-placement="bottom">code</button><br /><br /> <button class="btn btn-primary tool btnShow" data-toggle="tooltip" title="code" data-placement="left">code</button> </div> </div> <!--Attention to Bootstrap.js Below the file--> <script> $('.tool').tooltip(); $('.btnShow').tooltip('show'); //Let a label appear as soon as it comes up </script>
prompt box
A prompt box can prompt more content than a prompt label. It pops up with a small dialog box, similar in usage to a prompt label.
The sample code is as follows
<style> .row{ padding-top: 200px; } </style> <div class="container"> <div class="row"> <button class="btn btn-danger" data-toggle="popover" data-placement="top" title="This is the title of the box" data-content="This is the content of the bullet box, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long.">Click on me to pop up a box for you</button><br /><br /> <button class="btn btn-danger" data-toggle="popover" data-placement="right" title="This is the title of the box" data-content="This is the content of the bullet box, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long.">Click on me to pop up a box for you</button><br /><br /> <button class="btn btn-danger" data-toggle="popover" data-placement="bottom" title="This is the title of the box" data-content="This is the content of the bullet box, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long.">Click on me to pop up a box for you</button><br /><br /> <button class="btn btn-danger btnShow" data-toggle="popover" data-placement="left" title="This is the title of the box" data-content="This is the content of the bullet box, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long, it is very long.">Click on me to pop up a box for you</button> </div> </div> <!--Attention to Bootstrap.js Below the file--> <script> $('.btn').popover(); $('.btnShow').popover('show'); //Let a prompt box appear as soon as it comes up </script>
Collapse Menu
1. Single Fold Menu
Preparation steps:
1. Add a data-toggle="collapse" to the element you want to click on, and add a data-target to it so that its value is the same as the id or class of the corresponding content area
2. Add an id or class to the corresponding content area, corresponding to the element clicked
Be careful:
- 1. Content area cannot have padding value
<div class="container">
<div class="row">
<div class="col-lg-5">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a href="#" data-toggle="collapse" data-target="#con">program_</a>
</h3>
</div>
<!--Add in's class so that the fold menu does not expand after folding-->
<div id="con" class="in">
<div class="panel-body">
Program ape program program ape program ape program ape program ape program
</div>
</div>
</div>
</div>
</div>
</div>
2. A set of folding menus
- 1. Put all the panels in one parent and add a panel-group and an id to the parent
- 2. Add a data-parent attribute to the element you want to click on and make its value the same as the parent's id-
- 3. You need to add a class to the content area called collapse
The sample code is as follows:
<div class="container">
<div class="row">
<div class="col-lg-5">
<!--1. Put all the panels in one parent and add a panel-group and an id-->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<!--2. Add a data-parent attribute to the element you want to click on and make its value the same as the parent's id-->
<h3 class="panel-title" data-parent="#accordion" data-toggle="collapse" data-target="#con1">Autumn love</h3>
</div>
<!--3. You need to add a class to the content area as collapse-->
<div id="con1" class="collapse in">
<div class="panel-body">
Program love program program program program love program ape program love program ape program love program
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" data-parent="#accordion" data-toggle="collapse" data-target="#con2">Autumn love</h3>
</div>
<div id="con2" class="collapse">
<div class="panel-body">
Program love program program program program love program ape program love program ape program love program
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Carousel Map
- 1. Write a parent with an id and a carousel class
slide adds movement to the picture
data-interval="500" interval time, in milliseconds, 1 second equals 1000 milliseconds, do not be less than 400, otherwise you are prone to problems
data-ride="carousel" page starts playing as soon as it loads - 2. The contents of the dots should be placed in a layer with class carousel-indicators
- 3. Picture content area should be placed in a layer with class carousel-inner. Everything needs to be placed in a layer called item. Text can also be placed in this layer. It needs to have a parent. Parent's class is carousel-caption
- 4. The left and right buttons are written in the following format. href has the same value as the parent's id
<a href="#pic" class="carousel-control left" data-slide="prev">‹</a>
<a href="#pic" class="carousel-control right" data-slide="next">›</a>
The sample code is as follows:
<div class="container"> <div id="pic" class="carousel slide" data-interval="2000" data-ride="carousel"> <!--DoT--> <ol class="carousel-indicators"> <li class="active"></li> <li></li> <li></li> <li></li> </ol> <!--Picture of a broadcast map--> <div class="carousel-inner"> <div class="item active">  <div class="carousel-caption"> <h3>Here is Heading 1</h3> <p>Here's the content, lots and lots</p> </div> </div> <div class="item">  <div class="carousel-caption"> <h3>Here is Heading 2</h3> <p>Here's the content, lots and lots</p> </div> </div> <div class="item">  <div class="carousel-caption"> <h3>Here is Heading 3</h3> <p>Here's the content, lots and lots</p> </div> </div> <div class="item">  <div class="carousel-caption"> <h3>Here is Heading 4</h3> <p>Here's the content, lots and lots</p> </div> </div> </div> <!--Left and right buttons--> <a href="#pic" class="carousel-control left" data-slide="prev">‹</a> <a href="#pic" class="carousel-control right" data-slide="next">›</a> </div> </div>
Well, at this point, the learning documents of Bootstrap will be over, but the learning of Bootstrap is far from over. You still need to go to the Chinese language network of Bootstrap to read more documents, practice more, and ask me, Ha-ha~.
Bootstrap Series:
Bootstrap Learning Documents for Girlfriend (1)
Bootstrap Learning Documents for Girlfriend (2)
Bootstrap Learning Documents for Girlfriend (3)
Bootstrap Learning Documents for Girlfriend (4)