Home > Developer > Web Develop
[Bootstrap] A Huge Screen style page compatible with mainstream browsers such as Internet Explorer 8 and Google, bootstrapie8
Although IE6 has been ignored in addition to some demanding requirements, the browser IE8 of WIN7 still needs to be supported.
The main advantage of this method in this article is that you do not have to prepare much materials and do not need to search for a large number of images on the Internet. You only need to prepare bootstrap, jquery, and photoshop, for how to configure bootstrap and jquery, refer to [Bootstrap] a dialog box popped up on the current webpage, which can be closed without jump or non-pop-up dialog box (click to open the link)
Being asked to write a website is often plagued by layout,
In fact, it is not difficult. If you are familiar with Bootstrap and have a specific set of methods,
In this way, you can quickly and easily submit your homework to meet common requirements.
Although a large segment of Web Page Templates can be searched, it is critical to be able to understand the creation process of these page templates.
Once downloading these templates is incompatible with the browser and will not be modified, it will be too much trouble.
I. Basic Objectives
Use BootstrapV3 to create the following page:
As shown above on the home page, the navigation of the website is first held in the header of the page, namely left, middle, right, and drop-down menu dropdown. The content here is actually a button group, and the navigation bar component provided by Bootstrap cannot be used, because this navigation bar component is not compatible with IE8. For details, see: [Bootstrap] navbar defects and solutions on IE8 in the navigation bar (click to open the link)
Then there are three columns and two buttons Under the screen,
The most important parts of the website can be placed here,
The copyright information is used in the end.
The internal page is as follows:
It is also a top navigation bar,
Then there is the title and content of the inner page. The title of the inner page is essentially a giant screen, but it is only smaller than the size of the home page.
The following is the copyright information.
Ii. Production Process
1. first open photoshop, create a 140x1 image, the width is random, as wide as possible, the image is 1, the foreground is dark green R: 0G: B: 0, the background color is light green R: 100G: 200 B: 100. You can use the gradient tool to pull the following image. You can also pull the image to the left to the right, or to the middle to both sides, look at your preferences:
This is the only image we need to prepare. We can close photoshop and put it aside and save it in the project folder of the website,
This image is about 6 kb, and does not affect loading.
2. Home Page
The specific code is as follows, and a piece of code is described as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(1)
<Head> <! -- Website code, title, adaptive screen, etc. --> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <title> untitled document </title> <meta name =" viewport "content =" width = device-width, initial-scale = 1.0, user-scalable = no "> <! -- Js and css styles to be used --> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src </script> <script type = "text/javascript" src = "js/bootstrap. js "> </script> <! -- This is the only css style that needs to be defined by ourselves. It is used to solve the problem that the font cannot be properly displayed in Windows 7, show the bug of --> <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> (2) navigation barSince the navigation bar provided by bootstrap is not applicable, we have to use the button group provided by bootstrap to write the navigation bar by ourselves.
<! -- First, the navigation bar must be in the webpage header --> <div style = "position: absoulted; top: 0; left: 0; width: 100%;"> <! -- Define a button group --> <div class = "btn-group-justified"> <div class = "btn-group"> <! -- Note that a single button in the navigation bar, that is, the hyperlink writing method without a drop-down menu, uses the tag and adds the class style, instead of the button tag provided on the official website --> <a href = "#" class = "btn-success"> Left </a> </div> <div class = "btn- group "> <a href =" # "class =" btn-success "> Middle </a> </div> <div class =" btn-group "> Changing the btn-success in the class attribute to btn-primary and btn-danger can change the color of this button!(3) giant screen
The main screen is written as follows. The key is to introduce the background we just painted using photoshop.
The reason why we need to add so much <br> press enter is to enlarge the size of the screen.
<div class="jumbotron masthead"style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center"><br /><br /><br /><br /><br />(4) ColumnHere we use the bootstrap raster organization to typeset the three columns.
For more information, see [Bootstrap] automatic adaptation to the Bootstrap raster System of PCs, tablets, and mobile phones (click to open the link,
Divide the 12 cells of the entire webpage into three parts, and each 4 cells is just ready.
Each column is a panel without a panel header, which contains a big title of h3, a section text of p, and two buttons.
It is worth noting that these things must be placed in a container, otherwise the three things will fill the whole page:
<div class="container"><div class="row"><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 "><div class="panel panel-default"><div class="panel-body">(5) Copyright Information SectionThere's nothing to say, it's just a panel.
<div class="panel panel-default"><div class="panel-body" style="text-align: center">Copyright information</div></div>
3. Inner pages
The idea of the inner page will be identical and will not be repeated. Similarly, the Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
