I continued to write the layout of the previous article. In the previous article, I have completed the layout of the navigation bar and advertisement.
Start placing:
I think the final rendering is like this, as follows: I divided into three page screenshots, which are too big:
Then, the last unfinished one will be continued:
Step 5: Adding the grid system, I chose the layout of three columns col-md-4; the full grid is 12, and 4 is one-third of 12. You can also responsively layout and set multiple grids:
<div id="tag_container"> <div> <div> <img src="image/3.jpg"> <h2>animal1</h2> <p>Linka Hotel just said Fenghan saw a big souvenir institution sent to the back</p> <p><a href="#">click me</a></p> </div> <div> <img src="image/3.jpg"> <h2>animal1</h2> <p>Linka Hotel just said Fenghan saw a big souvenir institution sent to the back</p> <p><a href="#">click me</a></p> </div> <div> <img src="image/3.jpg"> <h2>animal1</h2> <p>Linka Hotel just said that Fenghan saw a big house search institution sent by me</p> <p><a href="#">click me</a></p> </div> </div> </div> </div> </div>
1) The grid must be in a container or container-fluent div, so that appropriate alignment and padding can be automatically assigned.
2) Make the id "tag_container" and the part with the class col-md-4 is centered and aligned:
#tag_container .col-md-4{ text-align: center; }Step 6: Set a line spacing and divide the upper and lower parts
<hr></hr>
css is
hr .divider{ margin:40px; }Step 7: The creation of the tab page. The following picture is the renderings of the three tab pages:
1) Principle of tab page:
<ul role="tablist"> <li><a href="#an1" role="tab" data-toggle="tab">animal1</a></li> <li><a href="#an2" role="tab" data-toggle="tab">animal2</a></li> <li><a href="#an3" role="tab" data-toggle="tab">animal3</a></li> </ul> <div> <div id="an1"> </div> <div id="an2"> </div> <div id="an3"></div> </div>
The tag page structure is: ul list declares the tag and labels class="nav nav-tabs" role="tablist"
The link in the li tag is marked role="tab" data-toggle="tab" so that the function of opening the page of the tab page can be achieved. The href="#an1" of each tab page is linked to the following display layout.
Expanded layout structure: In <div>, each tab page has a panel. Note that the id maps to the above tab page, so that the page can be opened. <div id="an3">
2) Add the layout in the tag page
<ul role="tablist"> <li><a href="#an1" role="tab" data-toggle="tab">animal1</a></li> <li><a href="#an2" role="tab" data-toggle="tab">animal2</a></li> <li><a href="#an3" role="tab" data-toggle="tab">animal3</a></li> </ul> <div> <div id="an1"> <div> <div> <h2>Animal1 <span>Zootopia</span></h2> <p>ajdkgjfd sees the price of time technology aircraft developed by the time technology aircraft. If the Embassy Shiguo Police Day results cost, the price of Ka song artificial mourning irjeigrugitajdokgjijrgi</p> </div> <div> <img src="image/1.jpg"> </div> </div> </div> <div> <div> <h2>Animal2 <span>Zootopia</span></h2> <p>ajdkgjfd sees the price of time technology aircraft developed by the time technology aircraft. If the Embassy Shiguo Police Day results cost, the price of Ka song artificial mourning irjeigrugitajdokgjijrgi</p> </div> <div> <img src="image/2.jpg"> </div> </div> </div> <div id="an3"> <div> <div> <h2>Animal3 <span>Zootopia</span></h2> <p>ajdkgjfd sees the price of time technology aircraft. If the Embassy Shiguo Police Day results, the price of Ka song artificial mourning irjeigrugitajdokgjijrgi</p> </div> <div> <img src="image/3.jpg"> </div> </div> </div> </div> </div>
1) Set the upper margin of the tab page
.feature{ padding: 30px 0 }2) Set the title fonts of the tab page, etc.
.feature-heading{ font-size: 50px; color:#2a6496; margin-top: 120px; }3) Set the subtitle format of the tab page:
.feature-heading .text-muted{ font-size: 28px; color: #999; }Step 8: Add the bottom copyright notice, the renderings are as follows:
<footer> <p><a href="#top">Back to top</a></p> <p>@2016 rongyu system</p> </footer>
Note: class="pull-right" can pull the element to the right, which is a feature of bootstrap's css.
Step 9: Add the pop-up button about:
<div id="about"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>About</h4> </div> <div> <p>Zootopia" is produced by Disney Pictures, co-directed by Rich Moore, Byrne Howard and Gerald Bush, and voiced by Ginnifer Goodwin, Jason Bateman, Shakira, Allen Tuddick, Idris Elba, J.K. Simmons and others [1]. </p> </div> <div> <button type="button" data-dismiss="modal">Get to know</button> <!-- <button type="button">Save changes</button> --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
1) Static pop-up window is divided into three parts, title, form and button; among which, we only need one button and the other commented out. And add id=about to facilitate the positioning below;
2) In the menu bar about the navigation bar, add toggle link, data-toggle="modal", and id corresponds to data-target="#about":
<li><a href="#" data-toggle="modal" data-target="#about">About</a></li>
Step 10, Menu Positioning
Click on the feature column of the navigation bar and the corresponding tab page will be opened; a piece of js code is required to implement it
<script> $(document).ready(function() { $("#demo-navbar .dropdown-menu a").click(function(){ var href = $(this).attr('href'); // alert(href); $("#tab-list a[href='" + href +"']").tab("'show"); }); }); </script>1) Navigate through id positioning $("#demo-navbar .dropdown-menu a") and set the click event;
2) Tab("'show") to open the tab page of $("#tab-list a[href='" + href +"']").
In this way, bootstrap learning has just started.
If you still want to study in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.