"Bootstrap" 4. Corporate website (to be continued)

The previous chapter has a team of personal site site to do some optimization. This chapter, it is our turn to enrich this work site, to supplement some projects, so as to demonstrate our ability. In other words, we're going to build a relatively complex home page for corporate websites.

Here are a few successful business sites:

-zappos (http://www.zappos.com/)

-amazon (https://www.amazon.com/)

Although these sites are unique, the common point is that they are complex.

If you divide by region, you can divide the home pages of these sites into three parts.

- Header Area : This section contains logos, main navigation with drop-down menus, level Two and useful link navigation, and login and registration options.

- main content area : This part of the layout is complex, at least three columns.

- Footer Area : Contains multi-column links and information.

We must be able to control these complexities. To do this, we need to make full use of Bootstrap's 12-column response system.

The following are the effects of the design we intend to construct in the middle and wide viewports:

In narrow viewports, the page changes accordingly, as shown in:

In this way, we need to do the following things.

(1) Take "Bootstrap" 2. The personal site of the Works Exhibition site as a starting point.

(2) Complete complex header areas, including logos, navigation, and practical navigation in the upper right corner (desktop viewport).

(3) in the narrower viewport, the utility navigation is displayed only as an icon, and is tied to the collapsed responsive navigation bar.

(4) To achieve the enterprise style color scheme.

(5) Adjust the desktop version and the responsive navigation bar.

(6) Set up complex multi-column layouts for the main content area and footer area.

Do the core work first-prepare the project's startup file.

1. Prepare the Startup file

Let's just take the previous example as a startup file and then modify it on top of it. (Of course, you can also directly provide the source of the book, and then extract the folder found 04_code_begin)

2. Page Header Area

Here we go from top to bottom to implement the complex header area, which includes the following features on the basis of the previous project:

-In the desktop browser and larger viewport, let the site Logo appear above the navigation bar.

-a navigation bar that contains menu items, and each menu item contains a drop-down menu.

-Use the navigation area.

-A login form with a user name and password field.

-Registration options. is the target result in the desktop browser:

The target results in narrow viewports are as follows:

Let's get started.

2.1 Navigation items with drop-down menus

You can see that the navigation bar is made up of a drop-down menu, so let's modify the corresponding navigation bar first. It is clear that the navigation items have a drop-down menu. We can refer to the official documentation to implement the drop-down menu first.

Official Document: http://getbootstrap.com/components/#navbar

Chinese document: http://v3.bootcss.com/components/#nav-dropdowns

(1) According to the documentation, we implement the code for the first drop-down menu as follows:

<Liclass= "Dropdown"><ahref="#"class= "Dropdown-toggle"Data-toggle= "Dropdown">Shoes<spanclass= "Caret"></span></a><ulclass= "Dropdown-menu">  <Li><ahref="#">Action</a></Li>  <Li><ahref="#">Another action</a></Li>  <Li><ahref="#">Something Else here</a></Li>  <Liclass= "Divider"></Li>  <Li><ahref="#">Separated link</a></Li>  <Liclass= "Divider"></Li>  <Li><ahref="#">One more separated link</a></Li></ul></Li>

You can see the following effects:

(2) Complete the other drop-down menu code.

(3) We modify the navigation items. Copy the contents of the bootstrap/navbar.less into the _navbar.less, overwriting the original content. Then find the comment//brand/project name, modify the. Navbar-brand's padding as follows:

Brand/project Name.navbar-brand {...  padding:10px 30px 0 15px;  ...

(4) Open the Less/_variables.less file and modify the variable as follows:

@navbar-height:50px;

(5) Save, compile. This way our drop-down menu is initially completed. The display results are as follows:

2.2 Put the Logo above the navigation bar

In this design, the Logo may appear in two places, depending on the situation:

-In the desktop and wide screen, displayed above the navigation bar;

-In the tablet and phone screen, it appears inside the responsive navigation bar.

Using Bootstrap's responsive class, we can do both. The method is as follows;

(1) Open the HTML document, locate the navigation bar, and copy the Navbar-brand links and pictures:

<class= "Navbar-brand"  href= "index.html">  <src= "Img/logo.png"  alt= "Bootstrap" "  width = "+" /> </ a >

(2) then paste to the top of the navigation bar, in

(3) Put this Logo with <div class= "container" >...</div> wrap it up so that it is confined to the inner grid of the Bootstrap center.

(4) Edit the Logo link and change its class name from Navbar-brand to Banner-brand. Then change the width of the picture to 180.

<Divclass= "Container">  <aclass= "banner-brand"href= "Index.html">    <imgsrc= "Img/logo.png"alt= "Bootstrap "width= " the" />  </a></Div>

(5) Save the changes, refresh the display, you can see the new logo on the navigation bar:

Below we need to adjust the Logo so that it is only displayed when necessary.

In _variables.less, locate the variable @grid-float-breakpoint and modify it to:

@screen-md-min;

This variable determines that the navigation bar collapses in a narrow viewport and expands in a wide viewport. In our practice, given the complexity of navigation, the navigation bar needs to be folded in close to the next wider breakpoint. Therefore, you need to set the value of the variable to @screen-md-min.

After setting this variable, we want to consider letting the Banner-brand appear only in the medium and large viewports, and let Navbar-brand appear only in small and ultra-tiny viewports. Bootstrap provides a set of responsive utility classes for this purpose, with reference to the online documentation: http://getbootstrap.com/css/#responsive-utilities (Chinese document: http://v3.bootcss.com /css/#responsive-utilities)

Below we will apply these classes as required.

(1) Add VISIBLE-MD visible-lg behind the Banner-brand class:

<classvisible-md visible-lg"  href=" # ">  <src= "Img/logo.png"  alt= "Bootstrap " width = " the" /> </ a >

(2) Add Visible-xs visible-sm behind the Navbar-brand class:

<class= "Navbar-brand visible-xs visible-sm"  href= "#">   <src= "Img/logo.png"  alt= "Bootstrap " width = "+" /> </ a >

(3) Save the changes and refresh the page. As you can see, in the large and medium viewports, only the logos in the Banner-brand are displayed:

In small and subminiature viewports, only the logos in the Navbar-brand are displayed:

2.3 Adjusting the navigation bar

The navigation bar now contains 7 items, each with submenus, reflecting the needs of a large and complex website.

Next, we'll move the all departments menu to the far right of the navigation bar to keep it at maximum distance from the other menus.

The procedure is: we first remove the parent element ul, and then the original parent element ul, and then included in the new UL tag, the class name of the new label is "Nav Navbar-nav pull-right".

 </ul><ul  class= "Nav navbar-nav pull-right"  >   <Liclass= "Dropdown">     <ahref="#"class= "Dropdown-toggle"Data-toggle= "Dropdown">All departments<bclass= "Caret"></b></a>

Keep changing and refresh the page to see the effect:

2.4 Adding use Navigation

Our design needs to provide several useful navigation links so that users can log in, register and view the shopping cart.

In large viewports, we put them in the upper-right corner of the page header area, as shown in:

In the smaller screen, the corresponding link icon is displayed at the right end of the collapsed navigation bar, as shown in:

Do what you say. Open the HTML document, add the markup for the utility navigation item in the header area, and place it behind the banner-brand element. The following is the complete tag, beginning with the header tag:

    <Headerrole= "banner">        <Divclass= "Container">            <aclass= "Banner-brand visible-md visible-lg"href="#">                <imgsrc= "Img/logo.png"alt= "Bootstrap "width= " the" />            </a>            <Divclass= "Utility-nav">                <ul>                    <Li><ahref="#"title= "Login or Register"><Iclass= "icon fa fa-user fa-lg"></I>Log in or Register</a></Li>                    <Li><ahref="#"title= "View Cart"><Iclass= "icon fa fa-shopping-cart fa-lg"></I>View Cart</a></Li>                </ul>            </Div>        </Div>

The Fa-user and Fa-shopping-cart classes above add the user and cart icons for the Font Awesome and increase their size by 33% through the Fa-lg class. For a detailed description of increasing the Font Awesome icon, refer to its documentation: http://fontawesome.io/examples/#larger

After saving the changes and refreshing the page, you can see that the newly added utility-nav appears below the Banner-brand logo:

Next, we need to adjust the layout relative to the position.

(1) Create a new file less/_banner.less and import the file in __main.less.

(2) Edit the _banner.less file, first set the. Utility-nav to absolute to the upper-right corner, and apply the style in the context of header[role= "banner"]:

Banner area styles//header[role= "Banner"]{  . Utility-nav {    position:absolute;    top:0;    right:0;}  }

(3) and then make some details adjustments:

-Add the upper padding to the. Banner-brand class to increase the height of the header area.

-Sets the positioning method of the header area container to relative so that it contains an absolutely positioned utility-nav element.

-Removes bullets from unordered lists.

-Floating list items to the left

-Displays the link as a inline-block and adds an inner margin.

-Remove the underline when hovering.

The style rules for completing the above adjustments are as follows:

Banner area styles//header[role= "Banner"]{  . Banner-brand {    padding-top:40px;  }  >. container {    position:relative;  }  . Utility-nav {    position:absolute;    top:0;    right:0;    > ul {      list-style:none;      > li {        float:left;        > a {          display:inline-block;          padding:8px 12px;          &:hover {            text-decoration:none;}}}}}  

Save the changes and compile. Adjust the browser window to the desktop creation size, and then refresh. You should see the Utility-nav element appear in the upper-right corner of the page header area.

Cond...

"Bootstrap" 4. Corporate website (to be continued)