Bootstrap online e-commerce website actual combat project 5_javascript skills

After you've built your company's Web site, you can then consider designing an online store.

The design of this chapter is based on a new page with the following elements added:

-a product grid containing small drawings, headings, and descriptions of commodities;

-On the left side of the lazy, used in accordance with categories, brands and other screening products;

-user-friendly navigation for breadcrumbs and pagination links.

Take a look at the Zappos (http://www.zappos.com/) and Amazon (https://www.amazon.com/) websites, search or browse through the items. The page you are creating here contains a similar product grid.

The effect of the completed design on the large, medium, and small screens should look like the following figure:

On the Super small screen, we want the layout of the page to look like this:

Bootstrap to complete the design provides a good starting point, on this basis, we have to use less to complete the adjustment work.

1. Marking of commodity pages

We can see that the header, the navigation bar, and the footer are consistent with the previous chapter, mainly because the main content is not the same. As can be seen from the effect diagram, we can divide the main content into three parts:

Part 1th: Breadcrumbs that are generated by unordered lists.

Part 2nd: The title of the page represented by H1.

Part 3rd:

-A series of options for screening products;

-Nine items, with small maps, captions, descriptions and buttons respectively;

-a paging link generated with an unordered list, located below the product, above the site footer.

1.1 Packet-chip navigation links

can refer to official documentation: http://getbootstrap.com/components/#breadcrumbs (Chinese document: http://v3.bootcss.com/components/#breadcrumbs)

(1) Very simply, we first knock out the code according to the document as follows:

<div role= "main" >
 <div class= "container" >
 <ol class= "breadcrumb" >
 <li><a href= "#" >Home</a></li>
 <li><a href= "#" >parent category</a></li>
 <li class= "Active" >current category</li>
 </ol>
 </div>
</div>

You can see the display effect as follows:

(2) Then we come from the definition of the crumb design, removing the light gray background and the extra inner margin. For this simple adjustment, we can directly modify the bootstrap folder in the Breadcrumbs.less file, while commenting out the unwanted lines, so you can leave the traces of changes:

. breadcrumb {
 padding:0;//@breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
 Margin-bottom: @line-height-computed;
 List-style:none;
 Background-color: @breadcrumb-bg;

The effect of the modified display is as follows:

1.2 Page Title

Similarly, official documentation: http://getbootstrap.com/components/#page-header (Chinese document: http://v3.bootcss.com/components/#page-header)

(1) Similarly, reference documentation can be tapped with the following code:

<div class= "Page-header" >
  
 

You can see the display effect as follows:

(2) We simply adjust the next style, delete the bottom border. Open the Type.less file in the Bootstrap folder, search for. Page-header and comment out the rules border-bottom:

. page-header {
 padding-bottom: ((@line-HEIGHT-COMPUTED/2)-1);
 Margin: (@line-height-computed * 2) 0 @line-height-computed;
 border-bottom:1px solid @page-header-border-color;
}

Save, compile, refresh, and you'll see more refreshing results. More blanks are consistent with our overall design, as shown below;

1.3 Sidebar, commodity grid, pagination links

Our main display is the sidebar on the left and the product grid on the right, and it's clear that we divide it into two parts with a grid system:

<div class= "Row" >
<div class= "Grid-options col-sm-3" > 
 </div>
 <div class= " Products-grid col-sm-9 ">
 </div>
</div>

1.3.1 Side Sidebar

We can see the sidebar by a few titles and the corresponding selection of items and a hyperlink button composition, we can first simple implementation of the code below, the specific style, we then adjust.

<div class= "Grid-options col-sm-3" >  

1.3.2 Commodities grid

As for the commodity grid, we can see that the product grid is made up of nine kinds of goods, and the pagination link under the commodity grid.

Similarly, we use the grid system to achieve a simple display of nine items, three items per line, a total of three columns.

<div class= "Products-grid col-sm-9" >
<div class= "Row" >
 <div class= "Product-item col-sm-4" > <a href= "#" ></a>  
 

1.3.3 Pagination Link

This is simple, and is generally implemented using a sequence-free table. However, we can refer to the official document of pagination or the Chinese document, you can implement the following code:

<nav>
 <ul class= "pagination" >
 <li class= "disabled" ><a href= "#" >«</a></li >
 <li class= "active" ><a href= "#" >1 <span class= "sr-only" > (current) </span></a> </li>
 <li><a href= "#" >2</a></li>
 <li><a href= "#" >3</a> </li>
 <li><a href= "#" >4</a></li>
 <li><a href= "#" >5</a> </li>
 <li><a href= "#" >»</a></li>
 </ul>
</nav>

The display effect is as follows:

So the homepage content is built up, what we need is to adjust the product grid and sidebar.

2. Adjust the commodity grid

We need to adjust the product grid in place. We used a grid system to constrain the width of each product by col-sm-4 classes, but the entire grid still looks unsatisfactory.

<div class= "Product-item col-sm-4" >

The main reason is that the length of the product profile is inconsistent, resulting in uncertainty about the height of each commodity. Therefore, when the Bootstrap floats all the goods to the left, the product behind may be inserted into the previous product. The result is that the entire grid looks cluttered, as the following illustration shows:

At present, in the large viewport, the 4th to 7th item is not aligned after the float because of the height range.

Our task is to adjust the grid system so that the visual effects of all grids are enhanced.

(1) Create a new file Less/_product-grid.less and refer to it in the __main.less file.

(2) We first adjust the picture width, font size, internal margin and the outside margin, the code is as follows:

. product-item {
 padding-bottom:32px;
 img {
 width:100%;
 }
 H2 {
 font-size: @font-size-large;
 line-height:1.2;
 padding:0!important;
 margin-top:6px;
 margin-bottom:2px;
 }
 p {
 font-size: @font-size-small;
 line-height:1.3;
 Color: @gray;
 }
}

(3) It's time to solve the layout problem. The key to solving the problem is to find the highest commodity. Let's say we have a guide that has a plan for what pictures and text introductions are used for each item. Small graphs of all items are standard sizes, and the text descriptions are no more than the current sample page. In this way, we can set a fixed height for all items, or use more flexible units such as EM or ex. In this example, we use a fixed value of 360px and hide the excess.

. product-item {
 height:360px;
 Overflow:hidden;
 ...
}

This layout problem is solved, now the display effect is as follows;

(4) After this, we can safely use the Bootstrap Response column class, to adjust the layout of different viewport effect. Specifically, we want to display only two items per line when the viewport is small and very small, and three items per line when the viewport is medium or large. To achieve this effect, we'll find and replace the classes in each item, and the result will be as follows:

<div class= "Product-item col-xs-6 col-md-4" >

After the two classes are replaced, each item will be half the width of the screen in both the oversized and the small viewport, and will switch to One-third of the screen width in the large view.

Here is the scenario below the viewport:

Because of the side bar interference, there is still a display problem, so we need to adjust the sidebar next.

3. Sidebar and filter options

In small, medium and large view, the sidebar is currently on the left.

The sidebar now looks like this:

After completing the design work, we want to make the clearance Sale into a large button, the filter options in two columns, and each option before the check box instead of bullets, as follows:

Let's start with the basic style and get the layout ready.

3.1 Basic layout

Let's first adjust the font, color, outer margin, and inner margin. Add the following rules to the _product-grid.less:

. grid-options {
 . Panel;
 . Panel-default;
 padding-top:12px;
 padding-bottom:24px;
 > H2 {
 margin-top:0;
 font-size:1.5 * (@font-size-large);
 line-height:1.2;
 Color: @gray-dark
 }
}

The above code is used as follows:

-Apply Bootstrap default panel style and Panel-default style to sidebar (see: http://getbootstrap.com/components/#panels);

-Add the top and bottom margins to the sidebar;

-Adjusts the font size, row height, and color of the H2 title.

3.2 Clearance Sale button

We're going to turn the clearance Sale link into a huge, attractive button.

Follow the instructions below to adjust the markup:

-Convert the link title and paragraph to a button;

-Add a Custom button class Btn-feature, which we created in the previous chapter:

-Add the Font Awesome icon to the entire label and magnify the Icon three times times by using the Icon-3x class built into the font Awesome.

PS: To learn more about Font Awesome Special dimension class, you can refer to the relevant documentation:http://fontawesome.io/examples/#larger

The adjusted markup looks like this:

<a class= "btn btn-feature choose-clearance" href= "#" > 
<span class= "icon fa fa-tag fa-3x" ></span>
 
 

The display effect is as follows:

Refine below to complete the following goals:

(1) Display the clearance Sale as block-level elements, and use the. Center-block () to center the Bootstrap;

(2) forcing its width to be 92.5% of the containing column;

(3) Adding upper and lower inner margins;

(4) Overwrite the white-space:nowrap rule of the Bootstrap button so that the text can be folded (Bootstrap white-space rules are defined in less/bootstrap/buttons.less, For more information on this attribute, you can refer to:https://css-tricks.com/almanac/properties/w/whitespace/)

(5) Set the button to relative positioning in order to apply absolute positioning to the label;

(6) Adjust the font, color and outer margin of the title and paragraph;

(7) Position the label icon to the upper right corner.

The above objectives can be achieved through the following rules:

. choose-clearance {
 . Center-block ();
 width:92.5%;
 padding-top:20px;
 padding-bottom:12px;
 White-space:normal;
 position:relative;
 h3{
 Font-weight:normal;
 Color: #fff;
 padding-top:4px;
 margin:6px;
 }
 p {
 margin:6px 20px;
 line-height:1.2
 }
 . icon {
 position:absolute;
 top:0;
 right:2px
 }
}

The display effect is as follows:

3.3 List of options

In this section, we want to convert several lists to filter options.

If you spend a bit of time analyzing the product filtering options for the online store Amazon (https://www.amazon.com/) or Zappos (http://www.zappos.com/), you'll find that these options are actually linked lists, And each option is adjusted to look like a check box. We also want to make the link a check box style, the user will only choose to tick, and we also need to adjust them to adapt to a variety of devices, including tablets and smartphones.

Amazon:

Zappos:

PS: On e-commerce sites such as Amazon and Zappos, filter items are associated with content management systems, and the items in the grid change dynamically as the user chooses to filter items. Bootstrap is a front-end design framework, not a content management system. As a result, our example does not dynamically filter the merchandise. But when we finish this page, we can use it completely in the content management system.

Starting with the H3 elements of each list, we adjust their size, row height, outer margin, and color:

. grid-options {
 ...
 >h3 {
 font-size: @font-size-large;
 line-height:1.2;
 margin-top:12px;
 Color: @gray-dark
 }
}

Then, we focus on the unordered list. We have added a special class to each unordered table called Options-list, and we use it as a selector to ensure that only these special lists are targeted.

First get rid of bullets and internal margins:

. grid-options { 
 .....
 options-list {
 list-style-type:none;
 padding-left:0
 }
}

Next is the link style. We'll add a style to the list items later, so we'll include the styles in the nested selectors.

 . options-list {
 ...
 Li {
 a {
 . btn;
 BTN-SM;
 padding-left:0;
 padding-right:0;
 Color: @gray;
 &:hover,
 &:focus,
 &:active,
 . Active & {
 color: @link-color;
 }

The functions of the above rules are as follows:

-We use less to add a basic button style to the Btn class, including displaying Inline-block links and extra padding:

The background color does not appear because no other button class is added;

By adding basic button styles, you can make it easier for users to click, use a finger or mouse.

-then introduce the related style to the BTN-SM class to reduce the inner margin and make the font size smaller than the standard button.

-then delete the left and right inner margins of the unordered list.

-then change the color of the link text to @gray.

-Finally, set the color of the hover, focus, and active links to @link-color.

The results now appear as shown in the following illustration:

PS: One might wonder why the author wants to borrow the. BTN and. Btn-sm Class of the button here instead of writing these two classes directly into the tag. Of course you can do that, but given the number of links, it's more convenient to apply styles through CSS.

3.4 Add Font Awesome icon check box for selected item links

We will use the font Awesome icon in less to add a check box to the selection link, plus another font Awesome icon to indicate the check box for the hover, focus, and active state.

Adding an icon through less requires the Font Awesome style to be obtained from three files. First, get the basic style from the core.less of the Font-awesome folder. In this file, you can see the following important styles:

. @{fa-css-prefix} {
 display:inline-block;
 Font:normal normal normal @fa-font-size-base/@fa-line-height-base fontawesome; Shortening font declaration
 Font-size:inherit//Can ' t have font-size inherit on line above, so need to override< C4/>text-rendering:auto; Optimizelegibility throws things off #1094
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}

The above styles are the basis for all font Awesome icon styles, including the font Awesome icon for fonts, which can be used to further strengthen the corresponding style.

For today's needs, we don't need a selector or curly braces, we just need the rules. We're going to apply these styles to the pick link. Most importantly, we want to use: before pseudo elements, because we can ensure the best results.

Copy the above rule (excluding the selector) from the core.less and paste it into the _product-grid.less file, nested as follows:

. grid-options {.....
 options-list {...
 .. Li {...
 .. A {...
 .. &:before{
 Display:inline-block;
 Font:normal normal normal @fa-font-size-base/@fa-line-height-base fontawesome; 
 Font-size:inherit; 
 Text-rendering:auto; 
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 } ...

These rules lay the groundwork for our next step. The next step is to specify which Font Awesome icon to use. Browse this page: http://fontawesome.io/icons/, you will find an empty check box icon and class name:

The less rules for this icon can be found in the Icons.less file in the Font-awesome folder. Open the file and search the string "}-square-o" to see the following line:

. @{fa-css-prefix}-square-o:before {content: @fa-var-square-o;}
for the previous line, we only need content: @fa-var-square-o. Copy it to the following rule in the previous &:before selector:

 &:before{... Content: @fa-var-square-o; 
}

Finally, we want to get some font-awesome styles, set a fixed width for the icon, and avoid the shift when the icon is switched. These styles can be found in the Fixed-width.less file in the Font-awesome folder. Copy the following two lines and paste the same into the &:before selector:

Width: (18EM/14);
Text-align:center;
after adding the styles above, compile them as CSS and refresh the browser. You can see the effect as follows:

Next, we add the selectors and rules in the same way and apply the checkmark of the Font Awesome checkbox icon to the hover, focus, and active state of the link:

. options-list {...
 Li {...
 .. A {...
 .. &:hover:before,
 &:focus:before,
 &:active:before,
 . Active &:before {
 content: @ Fa-var-check-square-o; 
}

Refresh the browser after saving edits to see the effect as follows:

3.5 use less to mix the options in the column

Earlier, we used less to implement features that were previously required to be implemented by adding tags. This is the most efficient way to take into account the large number of filtered items. The same idea applies to our alignment of options in the sidebar.

Of course, if you use the Bootstrap row and column classes, you can also adjust the tags:

<ul class= "options-list options-categories row" > <li class= "col-xs-6" ><a href=
 "#" >Option /a></li>
 <li class= "col-xs-6" ><a href= "#" >option 2</a></li>
 ...

The display effect is as follows:

But with Bootstrap mixing, we can achieve the same effect with a few lines of less.

(1) first. options-list selector application. Make-row () mixed with:

. options-list {
. Make-row ();
...
This mixed-in style is the same style that we add a row class to the tag. But only one line of code is needed.

(2) then use the. Make-xs-col () To apply the column rules to the list items:

. options-list {...
Li {
. Make-xs-column (6);
...
This is the same way we add the Col-xs-6 class to the associated Li tag.

3.6 Adjust option list layout for tablet and mobile phones

We want to limit the width of the options panel so that it's not too wide on the tablet.

For now, the clearance Sale button is a bit too wide. Under 480PX~768PX, the list of options is too far apart.

The corresponding screenshot is as follows:

In fact, just give the option to set a maximum width on the line:

. grid-options {
...
max-width:480px;
...

Let's adjust the list of options so that they appear as three columns in the viewport. With less, you can nest a media query in the appropriate selector, and then add an adjustment to it. Make-xs-column (4) mixed with:

Li {
 . make-xs-column (6);
 @media screen and (max-width: @screen-xs-max) {
 . Make-xs-column (4);
 }
 ...

Now save, compile, refresh the browser, and view the effect. But we may find that the sidebar is left-aligned with too much white on the right. And there are problems with the display of the product grid. Only one item is displayed per line.

Obviously, first we need to center the sidebar and use the. Center-block () This bootstrap can be mixed, the code is as follows

. grid-options {
...
. Center-block ();

In addition, the display of goods, debugging found that the previous chapter of the CSS selector div[role= "main"] [class*= "col-"] clear floating caused.

So, all we need is not to be clear about the float:

. product-item {
...
Clear:none!important;
...

Now the effect will be:

3.7 Folding Options panel on mobile phone

The filtered items now occupy a fairly pair of vertical spaces. This is a problem on the small screen, which pushes the product grid far below the page.

The reason is that the filter items occupy a lot of space unnecessarily. The commodity itself is the first to be shown. We have to let the user see the product quickly, or we can open the filter item when we need it.

To do this, we use the Bootstrap folding plugin. The following steps explain how to use a folding plug-in for the options panel, add a button to the extension panel, and limit the folding behavior to a narrow viewport.

(1) Open the HTML document, add a div tag, wrap the clearance Sale button and a list of three options. Add a special class collapse to this div, and a unique ID so that the JavaScript plugin finds it, and also adds a class with the same name, as follows (refer to the documentation: http://getbootstrap.com/javascript/ #collapse):

<div class= "Grid-options col-sm-3" >  
 

(2) Save the file and refresh the browser. You will find that the clearance Sale buttons and list of options disappear from sight. Only the H2 heading above the options panel is left, and the effect is as follows:

Now you need a toggle button to display the filtered items when clicked.

(3) Then we add a button in the H2 header and the corresponding properties are as follows:

<div class= "Grid-options col-sm-3" > 
 
 

Briefly explain the markings above:

-The Clearfix class added to the H2 ensures that it contains a toggle button because the toggle button floats to the right;

-Class BTN and Btn-primary will add the Bootstrap basic button style to the New button, the background color is @brand-primary;

-Class Pull-right will float the button to the right;

-In the button element, a Font Awesome gear icon is placed, magnified to twice times using the Fa-2x class.

Save and refresh the browser, you can see the display effect as follows:

(4) write some rules below, hide the toggle button in the large screen and expand the Options panel. To do this, you can add the following rule in _product-grid.less:

@media (min-width: @screen-sm-min) {
 . options-panel{
 display:block;
 }
 . Options-panel-toggle {
 display:none
 }
}

(5) The role of these rules is as follows:

-Media inquiries ensure that the rules apply only to small and large viewport;

-The first rule offsets the role of the collapse class, which by default is a hidden element;

-The second one hides the toggle button.

Save and refresh, you should be able to see the desired effect.

In the viewport, the list of options is folded, but the toggle button is visible:

In small, medium, and large viewport, toggle button hidden, List of options visible:

This will be the completion of our page.

4. Summary

In this example, we did the following things:

-Use the Bootstrap style to quickly implement the breadcrumbs, page titles and paging navigation, and customized as needed;

-Adjust the Bootstrap grid style, create a neat layout for the product, the key is the height of all goods to be consistent;

-Applied a style to the complex clearance Sale button, using the red background of the @brand-feature;

-Use the style of the BTN class to make the filter buttons easier to click or touch, and to meet our special needs by customizing;

-Use the Bootstrap column class, coupled with the response adjustment, to align the filtered list of items, and suitable for multiple-view ports;

-Use the Font Awesome style in the custom style sheet to add a check box next to the filtered item;

-Set options panel to fold in narrow viewport, visible in small, large viewport.

This example shows the effect address: http://ycdoit.com/show/bootstrap-code-05.html (with "Bootstrap Combat" PDF documents and source Links: http://xiazai.jb51.net/201610 /yuanma/bootstrapsite (jb51.net). rar)

This example source download: Bootstrap-code-05.zip

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.