The last time I wrote "Bootstrap Writes an Audience Giant Screen Style Page compatible with mainstream browsers" (click to open the link) Some of the older generation's needs may not be satisfied with this postmodern style. It doesn't matter, we can completely change the layout to a portal style, and they immediately accepted it:
First of all, you need to be clear about the portal layout. This will help us quickly layout. The beginning is a smaller giant screen, followed by a navigation bar, and the button group is used here, followed by various columns. Here is about the use of bootstrap grid system and panels, and finally copyright information, and here is still a panel.
Anyway, I personally think this portal layout style is a mess, but I don’t know why it seems to be very popular.
We need to prepare something, just a gradient bar with a height of 1 in photoshop. First, open photoshop and create a new image of 1024x1. The width is free, just try to be as wide as possible. The image is 1. The foreground color is dark green R:0 G:140 B:0, the background color is light green R:100 G:200 B:100. Use the gradient tool to pull out the following image. No matter how you pull it, you can pull it to the left and right, and to the middle and both sides, depending on your personal preferences:
This is the only image we need to prepare. You can close photoshop, throw it aside, and save this image in the website project folder. This image is only about 6k and does not affect loading at all.
After that, the specific web page code is as follows. The principle is exactly the same as the parts in "Bootstrap Write an Audience Giant Screen Style Page compatible with mainstream browsers" (click to open the link), except that the code location is different, so I will not describe it here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>testa</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; } </style> </head> <body> <div> <div style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align:center"> <h1> <font color="#ffffff">Banner : the Main headline</font> </h1> <h2> <font color="#ffffffff">Sub-heading</font> </h2> </div> <div> <div> <div> <a href="#"> button1 </a> </div> <div> <a href="#"> button2 </a> </div> <div> <button type="button" data-toggle="dropdown"> Dropdown1 <span></span> </button> <ul role="menu"> <li> <a href="#">button1</a> </li> <li> <a href="#">button2</a> </li> </ul> </div> <div> <button type="button" data-toggle="dropdown"> Dropdown2 <span></span> </button> <ul role="menu"> <li> <a href="#">button1</a> </li> <li> <a href="#">button2</a> </li> <li> <a href="#">button3</a> </li> <li></li> <li> <a href="#">button4</a> </li> </ul> </div> </div> </div> <div> <div> <div> <div> <div> <h3> Column1 </h3> <p> ... </p> <p> <a href="#">button4</a> </li> </ul> </div> </div> </div> <div> <div> <div> <div> <div> <h3> Column1 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> <div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> </div> </div> <div> <div> <div> <h3> Column3 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> </div> <div> <div> <div> <div> <h3> Column3 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> </div> </div> <div> <div style="text-align: center"> Copyright information </div> </div> </body></html>If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage 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.