[Bootstrap] 4. enterprise website (to be continued), bootstrap to be continued

[Bootstrap] 4. enterprise website (to be continued), bootstrap to be continued

In the previous chapter, the personal websites of the team were optimized. In this chapter, it is our turn to enrich this work site and add some projects to demonstrate our capabilities. In other words, we need to build a relatively complex corporate website homepage.

Below are several successful enterprise websites:

□Zappos (http://www.zappos.com /)

□Amazon (https://www.amazon.com /)

Although these websites have their own unique characteristics, they are all complicated.

If you divide the websites by region, you can divide the homepages of these websites into three parts.

□Page header Area: This section contains the Logo, the main navigation with a drop-down menu, the second-level and practical link navigation, and logon and registration options.

□Primary content area: The layout is complex, with at least three columns.

□Footer area: Contains multi-column links and information.

We must be able to control these complexities. Therefore, we need to make full use of the 12-column responsive system of Bootstrap.

Below are the effects of the design we intend to construct in the middle and wide sight ports:

The page changes accordingly in the narrow view, as shown in:

In this way, we need to do the following.

(1) Use [Bootstrap] 2. The personal site of the work site as the starting point.

(2) complete the complex page area, including the Logo, navigation, and the practical navigation in the upper right corner (desktop view ).

(3) In a narrow view, the practical navigation is only displayed as an icon, and is in parallel with the collapsed responsive navigation bar.

(4) implement a color scheme of the Enterprise style.

(5) Adjust the desktop and responsive navigation bar.

(6) configure a complex multi-column layout for the main content area and footer area.

First, prepare the project Startup File.

 

1. Prepare the Startup File

We can directly use the preceding example as the Startup File and then modify it on top of it. (Of course, you can also directly provide the source code of the book and decompress it to find the folder 04_Code_BEGIN)

 

2. page header Area

Next, let's start from top to bottom to implement a complex page header area. The previous project has the following features:

□Display the site Logo on the navigation bar in the desktop browser and in the large-sized view.

□Navigation bar containing menu items. Each menu item contains a drop-down menu.

□Use the navigation area.

□Logon form with username and password fields.

□Registration option. The following is the target result in the desktop browser:

The target result in the narrow-view is as follows:

Let's get started.

 

2.1 Navigation items containing the drop-down menu

We can see that the navigation bar is from the drop-down menu, so we should first modify the corresponding navigation bar. Obviously, the drop-down menu is used for navigation items. We can refer to the official documentation to implement the drop-down menu first.

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

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

(1) According to the document, the code for implementing the first drop-down menu is as follows:

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Shoes <span class="caret"></span></a><ul class="dropdown-menu">  <li><a href="#">Action</a></li>  <li><a href="#">Another action</a></li>  <li><a href="#">Something else here</a></li>  <li class="divider"></li>  <li><a href="#">Separated link</a></li>  <li class="divider"></li>  <li><a href="#">One more separated link</a></li></ul></li>

You can see the following results:

(2) complete other drop-down menu code.

(3) modify the navigation item. Copy the content of bootstrap/navbar. less to _ navbar. less to overwrite the original content. Find the comments/Brand/project name and modify the. navbar-brand padding as follows:

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

(4) Open the less/_ variables. less file and modify the variables as follows:

@navbar-height: 50px;

(5) Save and compile. In this way, the drop-down menu is initially completed. The display effect is as follows:

 

2.2 put the Logo above the navigation bar

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

□Display above the navigation bar on the desktop and wide screen;

□Display on the tablet and mobile phone screen inside the responsive navigation bar.

We can use Bootstrap's responsive usage class to achieve both of these two points. The method is as follows;

(1) Open the html document, find the navigation bar, and copy the link and image of navbar-brand:

<a class="navbar-brand" href="index.html"></a>

(2) paste it to the top of the navigation bar, between the

(3) wrap the Logo with <div class = "container">... </div> to restrict it to the mesh centered in Bootstrap.

(4) edit the Logo link and change its class name from navbar-brand to banner-brand. Change the image width to 180

<div class="container">  <a class="banner-brand" href="index.html">      </a></div>

(5) Save the changes and refresh the display. You can see the new Logo on the navigation bar:

Next we need to adjust the Logo so that it will be displayed only when necessary.

In _ variables. less, locate the variable @ grid-float-breakpoint and change it:

@grid-float-breakpoint: @screen-md-min;

This variable determines that the navigation bar is folded in a narrow view and expanded in a wide view. In our practice, considering the complexity of navigation, we need to fold the navigation bar at a wide breakpoint. Therefore, you must set the variable value to @ screen-md-min.

After setting this variable, we need to make the banner-brand display only in the medium and large views, and make the navbar-brand display only in the small and super small views. Bootstrap provides a set of responsive response classes for reference to the online documentation: http://getbootstrap.com/css/#responsive-utilities (Chinese documentation: http://v3.bootcss.com/css/#responsive-utilities)

Next we will apply these classes as needed.

(1) Add visible-md visible-lg to the banner-brand class:

<a class="banner-brand visible-md visible-lg" href="#">  </a>

(2) Add visible-xs visible-sm to the end of the navbar-brand class:

<a class="navbar-brand visible-xs visible-sm" href="#">  </a>

(3) Save the changes and refresh the webpage. As you can see, only the Logo in banner-brand is displayed in the middle and large visual views:

Only the Logo in navbar-brand is displayed in the small and ultra-small views:

 

2.3 adjust the navigation bar

Now the navigation bar contains 7 items, each with sub-menus, reflecting the needs of a large and complex website.

Next, we need to move the All levels menu to the rightmost side of the navigation bar to keep it at the maximum distance from other menus.

The operation procedure is as follows: first remove the ul parent element from the All elements menu, and rank it in the ul of the original parent element; then include it in the new ul tag, the Class Name of the new tag is "nav navbar-nav pull-right ".

</ul><ul class="nav navbar-nav pull-right">  <li class="dropdown">     <a href="#" class="dropdown-toggle" data-toggle="dropdown">All Departments <b class="caret"></b></a>

Keep the modification and refresh the page to see the effect:

 

2.4 Add use navigation

Our design requires several practical navigation links so that users can log on, register, and view the shopping cart.

In the middle and large views, place them in the upper right corner of the page area, as shown in:

In a small screen, the corresponding link icon is displayed at the rightmost of the collapsed navigation bar, as shown in:

 

Just do it. Open the html document, add the tag of the practical navigation item in the header area, and put it behind the banner-brand element. The complete tag starts with the header Tag:

    
In the fa-user and fa-shopping-cart classes above, the Font Awesome user and shopping cart icons are added, and their sizes are increased by 33% through the fa-lg class. For more information about the Font Awesome icon, see 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 relative position of the layout.
(1) create a file less/_ banner. less and import the file in _ main. less.
(2) edit the _ banner. less file, first set. utility-nav to absolute positioning 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) then adjust the details:
□Add the top padding for the. banner-brand class to increase the height of the page header area.
□Set the container Positioning Method in the header area to relative so that it contains the absolute utility-nav element.
□Delete the project symbol of the unordered list.
□Floating list items to the left
□Display the link as inline-block and add the padding.
□Delete 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 them. Adjust the browser window to the desktop creation size and refresh it. The utility-nav element appears in the upper-right corner of the page header area.
 
 
 
To be continued...