Task not completed, continue! Because just now the network was not good, I worked hard and sprinkled a lot of it all!
Today we're going to focus on a simple case that combines Bootstrap with HTML5:
First, as the title tells you, this is the mobile side, so you need a bunch of code like this:
<meta name="viewport" content="width=device-width,initial-scale=1"/>
Then, when you talk about the Bootstrap mimicry box, there are plug-ins like this:
<link type ="text/css" href="../dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../dist/js/bootstrap.js"></script>
Then, you know bootstrap a little bit, and you have to use it with jquery, so you also have a jQuery class library.
And it must be on top of bootstrap! Dear relatives!
<script src="../jquery-3.1.1.min.js"></script>
First look at the effect: a little ugly! Don't suggest it, because it was hit on the PC side! I use the browser WEB response format to see the effect, forgive, forgive!
Let's take another look at the effect of the mimicry box:
That's how it works!
The plug-ins are ready. Let's hit the code!
First CSS: Here's a small tip: I'm using Google Browser. Some of the lower versions of CSS3 browsers are incompatible, so it's more troublesome! I'll have a more compatibility article in a few days!
1 <style> 2 body{ 3 margin: 0 auto; 4 padding: 0; 5 } 6 nav{ 7 width: 100%; 8 height: 35px; 9 } 10 article{ 11 width: 100%; 12 background-color: #1983D1; 13 } 14 .div2{ 15 width: 100%; 16 height: 30px; 17 line-height: 30px; 18 background-color: #1983D1; 19 } 20 .div2>input{ 21 width: 78%; 22 height: 25px; 23 border: 0; 24 background-color: #2F8DD5; 25 /*border: 1px solid #2F8DD5;*/ 26 border-radius: 5px; 27 margin-left: 1vw;; 28 } 29 /*Change input box prompt font color*/ 30 input::placeholder{ 31 color: #8DC0E4; 32 } 33 .div2>button{ 34 width: 9%; 35 height: 25px; 36 background-color: #1983D1; 37 border: 0; 38 font-size: 3vw; 39 color: white; 40 } 41 .section1>ul{ 42 list-style: none; 43 display: flex; 44 justify-content:space-around; 45 align-items:center; 46 width: 100%; 47 height: 10vw; 48 margin-left: -30px; 49 } 50 .section1>ul>li{ 51 width: 24%; 52 color: white; 53 font-size: 2.5vw; 54 text-align: center; 55 margin-top: 2px; 56 } 57 .section2{ 58 background-color: white; 59 width: 100%; 60 } 61 62 .section2>ul{ 63 64 list-style: none; 65 display: flex; 66 justify-content:space-around; 67 align-items:center; 68 width: 100%; 69 height: 6rem; 70 margin-left: -30px; 71 } 72 .section2>ul>li{ 73 width: 24%; 74 /*color: white;*/ 75 font-size: 2vw; 76 text-align: center; 77 margin-top: 2px; 78 } 79 .section2>ul>li>span{ 80 font-size: 2.5rem; 81 } 82 .section3{ 83 width: 100%; 84 height: 90px; 85 line-height: 90px; 86 } 87 .section3 img{ 88 width: 20%; 89 height: 90px; 90 margin-top: -10px; 91 margin-left: 2vw; 92 border-radius: 15px; 93 } 94 .section4{ 95 margin-top: -4vw; 96 width: 100%; 97 height: 49vw; 98 } 99 .section4>img{ 100 width: 100%; 101 height: 49vw; 102 } 103 footer>ul{ 104 width: 100%; 105 height: 50px; 106 /*line-height: 98px;*/ 107 list-style: none; 108 display: flex; 109 justify-content: space-between; 110 margin-left: -1.5vw; 111 } 112 footer>ul>li{ 113 width: 24%; 114 height: 48px; 115 font-size: 3vw; 116 text-align: center; 117 color: #A9A9A9; 118 margin-top: 3vw; 119 } 120 </style>
CSS is ready.
Let's tap HTML next:
<body> <nav> <img src="1.png" style="width: 100%;height: 35px;" /> </nav> <div class="div1"></div> <div class="div2"> <input type="search" placeholder=" Ant Flower Chop" /> <button><span class="icon icon-user-tie"></span></button> <button data-toggle="modal" data-target="#kuang" data-backdrop="true"><span class="icon icon-plus"></span></button> </div> <!--Modal Box--> <div class="modal fade modal-sm" id="kuang" style="width: 30%; margin-left: 65%;"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!--body--> <div class="modal-body"> <ul style="list-style: none; color:#6B6B6B;font-size: 2vw;"> <li><span class="icon icon-bubbles4" style="margin-left: -3vw;"></span> Start a group chat</li> <li><span class="icon icon-user-plus" style="margin-left: -3vw;"></span> Add a friend</li> <li><span class="icon icon-qrcode" style="margin-left: -3vw;"></span> sweep one sweep</li> <li><span class="icon icon-coin-euro" style="margin-left: -3vw;"></span> I want to collect money</li> </ul> </div> </div> </div> </div> <article> <section class="section1"> <ul> <li> <span class="glyphicon glyphicon-qrcode"></span> <div>Scan</div> </li> <li> <span class="glyphicon glyphicon-usd"></span> <div>payment</div> </li> <li> <span class="glyphicon glyphicon-gbp"></span> <div>Receive money</div> </li> <li> <span class="n glyphicon glyphicon-credit-card"></span> <div>Card Pack</div> </li> </ul> </section> <section class="section2"> <ul> <li> <span class="icon icon-coin-yen" style="color: #EE4A02;"></span> <div>Transfer accounts</div> </li> <li> <span class="icon icon-credit-card" style="color: #EE4A02;"></span> <div>Credit card repayment</div> </li> <li> <span class="icon icon-mobile" style="color: red;"></span> <div>Voucher Center</div> </li> <li> <span class="icon icon-gift" style="color: red;"></span> <div>Red envelopes</div> </li> </ul> <ul> <li> <span class="icon icon-location" style="color: red;"></span> <div>Map</div> </li> <li> <span class="icon icon-database" style="color: orange;"></span> <div>financial products</div> </li> <li> <span class="icon icon-connection" style="background-color: #1983D1;color: white;"></span> <div>Free wireless</div> </li> <li> <span class="icon icon-warning" style="color: orange;"></span> <div>Safety Notice</div> </li> </ul> </section> </article> <hr style="background-color: #C3C3C3;width: 100%; height: 10px;" /> <section class="section3"> <img src="2.png" class="img-responsive" /> <span class="icon icon-camera pull-right" style="margin-top: -11.5vw;font-size: 5vw;margin-right: 2vw;color:#C3C3C3;"></span> </section> <hr style="background-color: #C3C3C3;width: 100%; height: 10px;" /> <section class="section4"> <img src="3.png" class="img-responsive" /> </section> <footer> <ul> <li style="color: #1983D1;"> <span class="icon icon-svg"></span> <div>Alipay</div> </li> <li> <span class="icon icon-users"></span> <div>Friend</div> </li> <li> <span class="icon icon-hipster"></span> <div>Word of mouth</div> </li> <li> <span class="icon icon-coin-dollar"></span> <div>My</div> </li> </ul> </footer> <script src="../jquery-3.1.1.min.js"></script> <script src="../dist/js/bootstrap.js"></script> </body>
This is HTML!
I have a response layout code here! It converts rem all into px:
<script> (function(doc) { function changeSize() { var size = doc.documentElement.clientWidth / 320 * 10; doc.querySelector('html').style.fontSize = size + 'px'; } window.onresize = changeSize; changeSize(); })(document) </script>
Howler! This is PayPal's home page with the Bootstrap mimic box!
What's unclear? Welcome to the comments and ask questions! I see they'll be answered one by one!