Boostrap template:

<! DOCTYPE html> <html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <! - the above3All meta tags * must * come first, and everything else * must * follow! --> <title>Bootstrap101Template</title> <! -- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <! HTML5 shim and responder.js are designed to allow IE8 to support HTML5 elements and media queries. -- Warning: through file:Response.js does not Respond when the page is accessed --><! - [if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script> <! [Endif]--> </head> <body> <h1> Hello world! </h1> <! --> <script SRC = -- jQuery (all JavaScript plug-ins for Bootstrap rely on jQuery, so they must come first) --> <script SRC ="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <! Load all JavaScript plugins for Bootstrap. You can also load individual plug-ins as needed. --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
Copy the code

Local template:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title>Title</title> <! -- Mobile device preferred --> <meta name="viewport" content="width=device-width, initial-scale=1"> <! --> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <! -- Bootstrap. js must be imported in jquery. js before importing bootstrap.js --> <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"</script> </head> <body> Hello </body> </ HTML >Copy the code

It is customary to refer to jquery.js and boostrap.js<body></body>In the bootstrap.css file<style></style>Tag.



<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title>Title</title> <! -- Mobile device preferred --> <meta name="viewport" content="width=device-width, initial-scale=1"> <! --> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <! -- Bootstrap. js must be imported in jquery. js before importing bootstrap.js --> <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> </head> <body> <! -- Layout container --> <divclass="container" style="border:#2aabd2 solid 2px;"> Layout container </div> </body> </ HTML >Copy the code



The default margin inside the container is 15px





<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title>Title</title> <! -- Mobile device preferred --> <meta name="viewport" content="width=device-width, initial-scale=1"> <! --> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <! -- Bootstrap. js must be imported in jquery. js before importing bootstrap.js --> <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> </head> <body> <! -- Layout container --> <divclass="container-"> <! -- Title tag, shortcut key: h${title tag}*6-- > < h1 > title tag < / h1 > < h2 > title tag < / h2 > < h3 > title tag < / h3 > < h4 > title tag < / h4 > < h5 > title tag < / h5 > < h6 > title tag < h6 > < spanclass="h1"<span ><spanclass="h2"</span> </div> </body> </ HTML >Copy the code

The commonly used styles







Set the style in the container,<p>Element has no line breaks

		<p class="text-center"<p style = "max-width: 100%; clear: both; min-height: 1em"center"> Look where I am </p> <pclass="text-right"> Look where I am </p> <p> Look where I am </p> <pclass="text-left"> Look where I am </p>Copy the code



		<p class="text-uppercase">text</p>
        <p class="text-lowercase">BOOTSTRAP</p>
        <p class="text-capitalize">this is bootstrap</p>
Copy the code