The framework has written many page styles for you. If you need to use it, you only need to download its corresponding file, and then directly copy cv
When using Bootstrap, all page styles need to be adjusted by class
v3 is recommended for version selection: https://v3.bootcss.com/
[note]
The js code of bootstrap depends on jQuery, which means that you must import jQuery when using the dynamic effect of bootstrap when developing a project.
Method 1: import with CDN (only with network)
Method 2: download the file locally, add the folder to the project, and reference directly -- for example, introduce the pop-up plug-in
<link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css"> <script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script>
[note]
Importing CSS files using < link rel = "stylesheet" href = "CSS file path" >
Import JS file using < script SRC = "JS file path / CDN address" > < / script >
2, Feature framework function
Layout container
<div> Left and right blank </div> <div> Left and right sides are not left blank </div>#Later, when using bootstrap as a page, write a div class=container first, and then write the page inside the Div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .c1 { background-color: red; height: 100px; } </style> </head> <body> <div> </div> <br> <div></div> </body> </html>
grid system
<div></div> To write a row is to divide the area into 12 parts < div class = "col-md-6" > get the number of copies you want#When using bootstrap, you must do 12 addition and subtraction in your mind
Grid Params
.col-xs- .col-sm- .col-md- .col-lg- # bootstrap will automatically select corresponding parameters for different displays # If you want to be compatible with all monitors, you can add them all # How to move position in a row <div></div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .c1 { background-color: red; height: 100px; border: 5px solid black; } @media screen and (max-width: 600px) { .c1 { background-color: greenyellow; height: 100px; border: 5px solid black; } } </style> </head> <body> <div> <div> <div> </div> <div></div> <br> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <br> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <br> <div></div> </div> </div> </body> </html>
Typesetting
bootstrap unifies the text fonts of all native HTML tags to a style acceptable to the naked eye
The effect is the same, but the meaning of the label is different
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <h1>Phase 14 <small>The best</small></h1> <p>Coquettish card is about to be turned on see coquettish card is about to be turned on lead See the coquettish card about to turn on see the coquettish card about to turn on see</p> <abbr title="Detailed explanation">What are you, kid</abbr> <blockquote> <p>Coquettish card is about to be turned on see coquettish card is about to be turned on</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </body> </html>
form
<table> <tr> <td>1</td> <td>jason</td> <td>123</td> <td>study</td> </tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div> <div> <table> <thead> <tr> <th>ID</th> <th>username</th> <th>password</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>jason</td> <td>123</td> <td>study</td> </tr> <tr> <td>1</td> <td>jason</td> <td>123</td> <td>study</td> </tr> <tr> <td>1</td> <td>jason</td> <td>123</td> <td>study</td> </tr> <tr> <td>1</td> <td>jason</td> <td>123</td> <td>study</td> </tr> <tr> <td>1</td> <td>jason</td> <td>123</td> <td>study</td> </tr> <tr> <td>1</td> <td>jason</td> <td>123</td> <td>study</td> </tr> </tbody> </table> </div> </div> </body> </html>
form
<div> <div> <h2>Landing page</h2> <form action=""> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <p> <select name="" id=""> <option value="">111</option> <option value="">222</option> <option value="">333</option> </select> </p> <textarea name="" id="" cols="30" rows="10"></textarea> <input type="submit"> </form> </div> </div> # Use form control to style form labels """ <input type="checkbox">222 <input type="radio">333 checkbox and radio We don't usually add it form-control，Just use the native """ # You can add has error (the parent tag of input) to the error message <p> username: <input type="text"> </p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> span { color: greenyellow; } </style> </head> <body> <div> <div> <h2>Landing page <span></span></h2> <form action=""> <p> <span></span>username:<input type="text"></p> <p><span></span>password:<input type="text"></p> <!-- <p>--> <!-- <select name="" id="">--> <!-- <option value="">111</option>--> <!-- <option value="">222</option>--> <!-- <option value="">333</option>--> <!-- </select>--> <!-- </p>--> <!-- <p>--> <!-- <input type="checkbox" >111--> <!-- <input type="checkbox">222--> <!-- <input type="radio">333--> <!-- </p>--> <!-- <textarea name="" id="" cols="30" rows="10"></textarea>--> <input type="submit"> </form> </div> </div> </body> </html>
Button
<a href=" https://www.mzitu.com/ "Class =" BTN BTN primary "> Click me</a> < button class = "BTN BTN danger" > press me < / button > < button class = "BTN BTN default" > press me < / button > < button class = "BTN BTN success" > press me < / button > < button class = "BTN BTN info" > press me < / button > < button class = "BTN BTN warning" > press me < / button > < button class = "BTN BTN warning BTN LG" > press me < / button > < button class = "BTN BTN warning BTN SM" > press me < / button > < button class = "BTN BTN warning BTN XS" > press me < / button > <input type="submit"> By adding a. BTN block class to a button, you can stretch it to 100% of the width of the parent element, and the button becomes a block level element.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <a href="https://www.mzitu.com/">Point me</a> <button>Press me</button> <button>Press me</button> <button>Press me</button> <button>Press me</button> <button>Press me</button> <button>Press me</button> <button>Press me</button> <button>Press me</button> <input type="submit"> </body> </html>
Icon - < span class = "icon name" ></span>
<h2>Landing page <span></span></h2> <style> span { color: greenyellow; } </style> # extend
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <i aria-hidden="true"></i> <div> <a href="#"><i aria-hidden="true"></i> home page</a> <a href="#"><i aria-hidden="true"></i> About us</a> <a href="#"><i aria-hidden="true"></i> Background application editing</a> <a href="#"><i aria-hidden="true"></i> System settings</a> </div> <i></i> <span>Loading...</span> <i></i> <span>Loading...</span> <i></i> <span>Loading...</span> <i></i> <span>Loading...</span> <i></i> <span>Loading...</span> </body> </html>
picture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div> <div> <div> <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..."> <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..."> <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..."> </div> </div> </div> </body> </html>
Navigation bar
<nav> <nav>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <nav> <div> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div id="bs-example-navbar-collapse-1"> <ul> <li><a href="#">Link <span>(current)</span></a></li> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator"></li> <li><a href="#">Separated link</a></li> <li role="separator"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit</button> </form> <ul> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div> <h1>Asia's largest online casino opened <small>Come and experience</small></h1> <div> <div> <h1>Hello, world!</h1> <p>...</p> <p><a href="#" role="button">Learn more</a></p> </div> </div> <div> <div> <a href="#"> <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="..."> </a> </div> <div> <a href="#"> <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="..."> </a> </div> <div> <a href="#"> <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="..."> </a> </div> <div> <a href="#"> <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="..."> </a> </div> ... </div> <div> <div> <a href="#"> <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="..."> </a> </div> <div> <a href="#"> <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="..."> </a> </div> <div> <a href="#"> <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="..."> </a> </div> <div> <a href="#"> <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="..."> </a> </div> ... </div> <div> <div> <div> <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1998860851,82672002&fm=26&gp=0.jpg" alt="..."> <div> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" role="button">Button</a> <a href="#" role="button">Button</a></p> </div> </div> </div> <div> <div> <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1998860851,82672002&fm=26&gp=0.jpg" alt="..."> <div> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" role="button">Button</a> <a href="#" role="button">Button</a></p> </div> </div> </div> <div> <div> <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1998860851,82672002&fm=26&gp=0.jpg" alt="..."> <div> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" role="button">Button</a> <a href="#" role="button">Button</a></p> </div> </div> </div> </div> </div> </body> </html>
Pager
<nav aria-label="Page navigation"> <ul> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
Multi page content
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css"> <script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script> </head> <body> <div> <!-- Nav tabs --> <ul role="tablist"> <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div> <div role="tabpanel" id="home"> 20 Technician No </div> <div role="tabpanel" id="profile"> 21 Technician No </div> <div role="tabpanel" id="messages"> 22 Technician No </div> <div role="tabpanel" id="settings"> 23 Technician No </div> </div> </div> </body> </html>
progress bar
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div> <div id='d2' role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 10%"> </div> </div> <button id="d1">Run up</button> <script> function func(i){ let tempWidth = 'width:' + i + '%' // style let contentText = i + '%' // text $('#d2').attr('style',tempWidth).text(contentText) } $('#d1').click(function () { for(let i=0;i<101;i++){ setInterval(func(i),5000) } }) </script> </body> </html>
Spring box
https://lipis.github.io/bootstrap-sweetalert/
swal('Are you all right??') undefined swal('Are you all right??') undefined swal('Are you all right??','I'm not good. I miss you!') undefined swal('Are you all right??','I'm not good. I miss you!','success') undefined swal('Are you all right??','I'm not good. I miss you!','warning') undefined swal('Are you all right??','I'm not good. I miss you!','error') undefined swal('Are you all right??','I'm not good. I miss you!','info') undefined # We'll cover that later in the course
More exciting:
Bootstrap Chinese document -- bootstrap is the most popular, mobile device first, responsive front-end development framework in the world.
Global CSS style · Bootstrap v3 Chinese document
[CSS]
[components]
https://v3.bootcss.com/components/
[JavaScript plug in]
https://v3.bootcss.com/javascript/
Front end resource summary:
https://www.cnblogs.com/bigorangecc/p/12874459.html