avtt天堂网久久精品,99久久99精品久久久久久

Home

Web Front-end

HTML Tutorial

[Reading Notes 'Bootstrap Practical Combat'] 5. E-commerce website

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 15, 2016 am 10:32 AM

After building the company website, you can then consider designing an online store.

This design is based on the design in the previous chapter, except that a new page containing the following elements is added:

□ Product grid with product thumbnails, titles and descriptions;

□ Be lazy on the left, used to filter products by category, brand, etc.;

□ Breadcrumbs and pagination links for easy user navigation.

Let’s first take a look at the websites of Zappos (http://www.zappos.com/) and Amazon (https://www.amazon.com/), and search or browse the products. The page to be created here contains a similar product grid.

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

On ultra-small screens, we want the layout of the page to become as follows:

Bootstrap provides a good starting point for completing this design. On this basis, we will use LESS to complete the adjustment work.

1. Marks on the product page

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

Part 1: Breadcrumb navigation links generated using unordered lists.

Part 2: Page title represented by h1.

Part 3:

□ A range of options for filtering products;

□ Nine products, each with thumbnails, titles, descriptions and buttons;

□ Pagination links generated using an unordered list, located below the products and above the site footer.

1.1 Crumb navigation link

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

(1) is very simple. Let’s first type out the code according to the document as follows:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">role</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><</span><span style="color: #800000;">ol </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="breadcrumb"</span><span style="color: #0000ff;">></span>
             <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Home<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
             <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Parent Category<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
             <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="active"</span><span style="color: #0000ff;">></span>Current Category<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

You can see the display effect as follows:

(2) Then we customize the design of the breadcrumbs and remove the light gray background and extra padding. For this simple adjustment, we can directly modify the breadcrumbs.less file in the bootstrap folder and comment out the unnecessary lines to leave traces of the modification:

<span style="color: #000000;">.breadcrumb {
 <span style="background-color: #ccffcc;"> padding: 0; //@breadcrumb-padding-vertical @breadcrumb-padding-horizontal;</span>
  margin-bottom: @line-height-computed;
  list-style: none;
 <span style="background-color: #ccffcc;"> //background-color: @breadcrumb-bg;</span></span>

The display effect after modification is as follows:

1.2 Page Title

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

(1) Similarly, referring to the documentation, you can type the code as follows:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="page-header"</span><span style="color: #0000ff;">></span>
   <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>Product Category Name <span style="color: #0000ff;"><</span><span style="color: #800000;">small</span><span style="color: #0000ff;">></span>with explanatory text<span style="color: #0000ff;"></</span><span style="color: #800000;">small</span><span style="color: #0000ff;">></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

You can see the display effect as follows:

(2) We simply adjust the style and delete the lower border. Open the type.less file in the bootstrap folder, search for .page-header and comment out the rule border-bottom:

<span style="color: #000000;">.page-header {
  padding-bottom: ((@line-height-computed / 2) - 1);
  margin: (@line-height-computed * 2) 0 @line-height-computed;
  <span style="background-color: #ccffcc;">//border-bottom: 1px solid @page-header-border-color;</span>
}</span>

Save, compile, refresh, and you will see cleaner results. More white space is consistent with our overall design, as shown below;

1.3 Sidebar, Product Grid, Pagination Links

Our main display content is the sidebar on the left and the product grid on the right. Obviously, we use the grid system to divide it into two parts:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="row"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="grid-options col-sm-3"</span><span style="color: #0000ff;">></span>                   
  <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;">  <</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="products-grid col-sm-9"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

1.3.1 Sidebar

We can see that the sidebar consists of several titles, corresponding options for filtering products, and a hyperlink button. We can simply implement the code as follows. The specific style will be adjusted later.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="grid-options col-sm-3"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Narrow your selection<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="choose-clearance"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Clearance Sale<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>View clearance items<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Categories<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="options-list options-categories"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 1<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 4<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 5<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 6<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 7<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 8<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 9<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 10<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Brands<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="options-list options-brands"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 1<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 4<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 5<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 6<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 7<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 8<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 9<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 10<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Another Filter<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="options-list options-other"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 1<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 4<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 5<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 6<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 7<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 8<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 9<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 10<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

1.3.2 Product Grid

As for the product grid, we can see that it consists of product grids for nine products and pagination links under the product grid.

Similarly, we use a grid system to simply display nine products, with three products in each row and three columns in total.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="products-grid col-sm-9"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="row"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="product-item <span style="background-color: #ccffcc;">col-sm-4</span>"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/product.png"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="sample product"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Product Title<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This text describes the above product a little not too much but just enough or maybe a little more<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default btn-xs pull-right"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>View this product <span style="color: #0000ff;"><</span><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="fa fa-arrow-circle-right"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><br>  ...</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008000;"><!--</span><span style="color: #008000;"> /.row </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

1.3.3 分頁鏈接

這個(gè)很簡單，一般使用無序列表實(shí)現(xiàn)。不過，我們可以參考分頁的官方文檔或者中文文檔，可以實(shí)現(xiàn)代碼如下：

<span style="color: #0000ff;"><</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pagination"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="disabled"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&laquo;</span><span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="active"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>1 <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sr-only"</span><span style="color: #0000ff;">></span>(current)<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&raquo;</span><span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>

顯示效果如下：

這樣主頁內(nèi)容就搭建起來了，我們需要的就是對商品網(wǎng)格和側(cè)邊欄進(jìn)行調(diào)整。

2.調(diào)整商品網(wǎng)格

我們需要把商品網(wǎng)格調(diào)整到位。之前我們使用柵格系統(tǒng)，通過?col-sm-4 類來約束每個(gè)商品的寬度，但整個(gè)網(wǎng)格看起來仍然盡不如人意。

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="product-item col-sm-4"</span><span style="color: #0000ff;">></span>

主要是由于商品簡介的長短的不一致，導(dǎo)致每個(gè)商品的高度不確定。因此，Bootstrap 在向左浮動(dòng)所有商品時(shí)，后面的商品就可能插入到前面的商品中。結(jié)果就是整個(gè)網(wǎng)格顯得很混亂，如下圖所示：

目前，在中大型視口，第4~7個(gè)商品由于高度不等，浮動(dòng)后沒有對齊。

我們的任務(wù)就是調(diào)整網(wǎng)格系統(tǒng)，讓所有網(wǎng)格的視覺效果得到增強(qiáng)。

(1) 創(chuàng)建新文件 less/_product-grid.less ，并在 __main.less 文件中引用。

(2) 我們先調(diào)整下圖片寬度、字號、內(nèi)邊距和外邊距，代碼如下：

<span style="color: #000000;">.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;
  }
}</span>

(3) 現(xiàn)在該來解決布局問題了。解決問題的關(guān)鍵是找到最高的商品。假設(shè)我們有一個(gè)指南，其中對每個(gè)商品使用什么圖片和文字介紹都有規(guī)劃。所有商品的小圖都是標(biāo)準(zhǔn)大小，文字說明也不會(huì)比當(dāng)前我們示例頁面中的多。這樣的話，我們就可以給所有商品都設(shè)置一個(gè)固定的高度，或者使用 em 或 ex 等更靈活的單位。在這個(gè)示例中，我們就使用360px 的固定值，并把超出的部分隱藏起來。

<span style="color: #000000;">.product-item {
   height: 360px;
   overflow: hidden;<br>   ...
}</span>

這樣布局問題就解決了，現(xiàn)在的顯示效果如下;

(4) 在此之后，我們就可以放心地使用 Bootstrap 的響應(yīng)式分欄類，去調(diào)整不同視口的布局效果了。具體來說，我們希望當(dāng)視口小和超小的時(shí)候，每行只顯示兩個(gè)商品；而當(dāng)視口中等或較大時(shí)，每行顯示三個(gè)商品。為實(shí)現(xiàn)這個(gè)效果，我們要找到并替換每個(gè)商品中的類，結(jié)果要變成如下所示：

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="product-item <span style="background-color: #ccffcc;">col-xs-6 col-md-4</span>"</span><span style="color: #0000ff;">></span>

替換成這兩個(gè)類之后，每個(gè)商品在超小和小視口將會(huì)是屏幕寬度的一半，而在中大視口中將切換成屏幕寬度的三分之一。

以下是小視口下的情景：

超小視口下因?yàn)閭?cè)邊欄的干擾，還是有顯示問題，所以我們接下來就需要調(diào)整側(cè)邊欄了。

3.側(cè)邊欄和篩選選項(xiàng)

在小、中、大視口中，側(cè)邊欄目前都位于左側(cè)。

目前側(cè)邊欄如下所示：

而在完成設(shè)計(jì)工作后，我們希望把 Clearance Sale 做成一個(gè)超大按鈕，把篩選選項(xiàng)排成兩欄，而且每個(gè)選項(xiàng)前都是復(fù)選框而非項(xiàng)目符號，如下所示：

下面先從基本的樣式開始，把布局弄好。

3.1 基本布局

我們先來調(diào)整字體、顏色、外邊距和內(nèi)邊距。在_product-grid.less 中添加規(guī)則如下：

<span style="color: #000000;">.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;
  }
}</span>

上面代碼的用途如下：

□ 給側(cè)邊欄應(yīng)用 Bootstrap 默認(rèn)的 panel樣式和?panel-default 樣式（參見：http://getbootstrap.com/components/#panels）；

□ 給側(cè)邊欄添加上、下邊距；

□ 調(diào)整 h2 標(biāo)題的字號、行高和顏色。

3.2 Clearance Sale 按鈕

我們要把Clearance Sale 鏈接變成一個(gè)超大的吸引人的按鈕。

按照下面的說明調(diào)整標(biāo)記：

□ 把鏈接的標(biāo)題和段落都轉(zhuǎn)換成按鈕；

□ 添加自定義的按鈕類 btn-feature，這是我們在上一章創(chuàng)建的：

□ 給整個(gè)標(biāo)簽添加 Font Awesome 圖標(biāo)，通過使用 Font Awesome 內(nèi)置的 icon-3x 類，將圖標(biāo)放大三倍。

PS:要了解 Font Awesome 特殊尺寸類的更多信息，可以參考相關(guān)文檔：http://fontawesome.io/examples/#larger

調(diào)整后的標(biāo)記如下所示：

<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="<span style="background-color: #ccffcc;">btn btn-feature</span> choose-clearance"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span> <br><span style="background-color: #ccffcc;"><span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="icon fa fa-tag fa-3x"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Clearance Sale<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>View clearance items<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>

顯示效果如下：

下面再細(xì)化，完成下列目標(biāo)：

(1) 將 Clearance Sale 顯示為塊級元素，使用 .center-block() 這個(gè) Bootstrap 的混入將其居中；

(2) 強(qiáng)制其寬度為包含欄的92.5%；

(3) 添加上、下內(nèi)邊距；

(4) 覆蓋 Bootstrap 按鈕的 white-space:nowrap 規(guī)則，讓文本可以折行（Bootstrap 的white-space 規(guī)則是在 less/bootstrap/buttons.less 中定義的，關(guān)于這個(gè)屬性的更多信息，大家可以參考：https://css-tricks.com/almanac/properties/w/whitespace/）

(5) 將按鈕設(shè)置為相對定位，以便對標(biāo)簽應(yīng)用絕對定位；

(6) 調(diào)整標(biāo)題和段落的字體、顏色和外邊距；

(7) 把標(biāo)簽圖標(biāo)定位到右上角。

以上目標(biāo)通過下列規(guī)則就可以實(shí)現(xiàn)：

<span style="color: #000000;">.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;
  }
}</span>

顯示效果如下：

3.3 選項(xiàng)列表

本節(jié)，我們要把幾個(gè)列表轉(zhuǎn)換成篩選選項(xiàng)。

如果花點(diǎn)時(shí)間分析下在線商店 Amazon (https://www.amazon.com/)或者?Zappos (http://www.zappos.com/) 的商品篩選選項(xiàng)，會(huì)發(fā)現(xiàn)這些選項(xiàng)其實(shí)是鏈接列表，而且每個(gè)選項(xiàng)都被調(diào)整成了復(fù)選框的樣子。我們也要把鏈接做成復(fù)選框的樣式，用戶只要選擇就會(huì)勾選，另外我們還要調(diào)整它們以適應(yīng)多樣化的設(shè)備，包括平板電腦和智能手機(jī)。

Amazon：

Zappos ：

PS:在 Amazon 和 Zappos 等電子商務(wù)網(wǎng)站上，篩選項(xiàng)與內(nèi)容管理系統(tǒng)是關(guān)聯(lián)的，網(wǎng)格中的商品會(huì)隨著用戶選擇篩選項(xiàng)而動(dòng)態(tài)變化。 Bootstrap 是一個(gè)前端設(shè)計(jì)框架，不是內(nèi)容管理系統(tǒng)。因此，我們這個(gè)示例做不到動(dòng)態(tài)篩選商品。但我們這個(gè)頁面完成后，是完全可以在內(nèi)容管理系統(tǒng)中使用的。

先從每個(gè)列表的 h3 元素開始，我們調(diào)整它們的大小、行高、外邊距和顏色：

<span style="color: #000000;">.grid-options {<br>  ...
  >h3 {
    font-size: @font-size-large;
    line-height: 1.2;
    margin-top: 12px;
    color: @gray-dark;
  }
}</span>

然后，我們把注意力集中到無序列表上。我們有給每個(gè)無序列表上都添加了一個(gè)特殊的類，叫 options-list，我們就用它作為選擇符，確保只針對這些特殊的列表。

首先去掉項(xiàng)目符號和內(nèi)邊距：

<span style="color: #000000;">.grid-options { 
   ...
  .options-list {
    list-style-type: none;
    padding-left: 0;
  }
}</span>

接下來是鏈接樣式。稍后我們還要給列表項(xiàng)添加樣式，因此我們把這些樣式包含了嵌套的選擇符中。

<span style="color: #000000;">  .options-list {
     ...
     li {
       a {
          .btn;
          .btn-sm;
          padding-left: 0;
          padding-right: 0;
          color: @gray;
          &:hover,
          &:focus,
          &:active,
          .active & {
            color: @link-color;
         } ...</span>

以上規(guī)則的作用如下：

□ 我們利用 LESS 通過 .btn 類加入了基本的按鈕樣式，包括顯示 inline-block 鏈接和額外的內(nèi)邊距：

?■ 因?yàn)闆]有添加其他按鈕類，所以也沒有出現(xiàn)背景顏色；

?■ 通過添加基本的按鈕樣式，可以讓用戶更方便點(diǎn)擊，使用手指或鼠標(biāo)皆宜。

□ 再通過 .btn-sm 類引入相關(guān)樣式，以減少內(nèi)邊距，并讓字號比標(biāo)準(zhǔn)按鈕再小一些。

□ 接著刪除無序列表的左和右內(nèi)邊距。

□ 再把鏈接文本的顏色改為 @gray。

□ 最后，設(shè)置懸停、焦點(diǎn)和活動(dòng)鏈接的顏色為 @link-color 。

現(xiàn)在的顯示結(jié)果如下圖所示：

PS:有人可能會(huì)奇怪為什么作者要在這里借用按鈕的 .btn和 .btn-sm 類，而不是直接把這兩個(gè)類寫進(jìn)標(biāo)記。當(dāng)然也可以那么做，但考慮到鏈接的數(shù)量那么多，還是通過CSS來應(yīng)用樣式更便捷。

3.4 為選項(xiàng)鏈接添加 Font Awesome 圖標(biāo)復(fù)選框

我們將在LESS中使用 Font Awesome圖標(biāo)在選項(xiàng)鏈接做出添加復(fù)選框，另外還要加入另一個(gè) Font Awesome 圖標(biāo)，以表示懸停、聚焦和活動(dòng)狀態(tài)下勾選的復(fù)選框。

通過 LESS 添加圖標(biāo)需要從三個(gè)文件中取得 Font Awesome 樣式。首先，從 font-awesome 文件夾的 core.less 中獲得基本樣式。在這個(gè)文件中，可以看到以下重要的樣式：

<span style="color: #000000;">.@{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
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}</span>

以上樣式是所有 Font Awesome 圖標(biāo)樣式的基礎(chǔ)，包括作為字體的 Font Awesome 圖標(biāo)，以此為基礎(chǔ)可以進(jìn)一步加強(qiáng)相應(yīng)的樣式。

對現(xiàn)在的需求來說，我們不需要選擇符也不需要花括號，只需要其中的規(guī)則。我們要把這些樣式應(yīng)用給選項(xiàng)鏈接。最重要的，我們要使用 :before 偽元素，因?yàn)榭梢源_保結(jié)果最佳。

從 core.less 中復(fù)制上面的規(guī)則（不包括選擇符），粘貼到 _product-grid.less 文件中，嵌套如下：

<span style="color: #000000;">.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;
       } ...</span>

這些規(guī)則為我們下一步打下了基礎(chǔ)。下一步就可以指定使用哪個(gè) Font Awesome 圖標(biāo)了。瀏覽這個(gè)頁面：http://fontawesome.io/icons/ ，就會(huì)發(fā)現(xiàn)空復(fù)選框的圖標(biāo)和類名：

這個(gè)圖標(biāo)的 LESS 規(guī)則可以在 font-awesome 文件夾的 icons.less 文件里找到。打開該文件，搜索字符串"}-square-o" ，可以看到下面這一行：

.@{fa-css-prefix}-square-o:before { content: @fa-var-square-o; }

對于前面這一行，我們只需要?content: @fa-var-square-o 。把它復(fù)制到之前的 &:before 選擇符中的規(guī)則后面：

<span style="color: #000000;">&:before{ ...
  content: @fa-var-square-o; 
}</span>

最后，我們想取得另一些 Font-Awesome 樣式，為圖標(biāo)設(shè)置固定的寬度，避免圖標(biāo)再切換時(shí)出現(xiàn)位移。這些樣式可以在 font-awesome 文件夾的 fixed-width.less 文件中找到。復(fù)制下面這兩行，同樣粘貼到 &:before 選擇符中：

<span style="color: #000000;">  width: (18em / 14);
  text-align: center;</span>

添加上面的樣式后，編譯它們?yōu)镃SS并刷新瀏覽器?？梢钥吹叫Ч缦?

接下來，我們以同樣的方式添加選擇符和規(guī)則，把 Font Awesome 復(fù)選框圖標(biāo)的勾選版應(yīng)用給鏈接的懸停、焦點(diǎn)和活動(dòng)狀態(tài)：

<span style="color: #000000;">.options-list { ...
  li { ...
    a { ...
      &:hover:before,
      &:focus:before,
       &:active:before,
      .active &:before {
         content: @fa-var-check-square-o; 
}</span>

保存編輯后刷新瀏覽器可以看到效果如下：

3.5 使用 LESS 混入在欄中對其選項(xiàng)

前面，我們使用 LESS 實(shí)現(xiàn)了以往需要通過添加標(biāo)記實(shí)現(xiàn)的功能?？紤]到篩選項(xiàng)的數(shù)量很多，這樣做效率最高。同樣的思路也適用于我們對齊側(cè)邊欄中的選項(xiàng)。

當(dāng)然，如果使用 Bootstrap 的 row 和欄類，通過調(diào)整標(biāo)記也是可以的：

<span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="options-list options-categories row"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-xs-6"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 1<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-xs-6"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
  ...</span>

?顯示效果如下：

但有了 Bootstrap 的混入，我們用幾行 LESS 就可以實(shí)現(xiàn)同樣的效果。

(1) 首先 .options-list 選擇符應(yīng)用 .make-row() 混入：

<span style="color: #000000;">.options-list {
  .make-row();
  ...</span>

這個(gè)混入加入的樣式與我們在標(biāo)記中添加 row 類加入的樣式一樣。但這里只需要一行代碼。

(2) 然后使用 .make-xs-col() 混入給列表項(xiàng)應(yīng)用分欄規(guī)則：

<span style="color: #000000;">  .options-list { ...
     li {
       .make-xs-column(6);
       ...</span>

這樣就跟我們給相關(guān)的li 標(biāo)簽添加 col-xs-6 類的效果一樣了。

3.6 針對平板和手機(jī)調(diào)整選項(xiàng)列表布局

我們要限制選項(xiàng)面板的寬度，讓它在平板電腦中不至于太寬。

目前來看，Clearance Sale 按鈕有點(diǎn)太寬。在 480px~768px 下，選項(xiàng)列表相隔太遠(yuǎn)了。

相應(yīng)的截圖如下：

其實(shí)只要給選項(xiàng)版設(shè)置一個(gè)最大寬度就行了：

<span style="color: #000000;">.grid-options {
   ...
   max-width: 480px; 
   ...</span>

下面我們再調(diào)整選項(xiàng)列表，讓它們在小視口中顯示為三欄。使用LESS ，可以在適當(dāng)?shù)倪x擇符中嵌套一個(gè)媒體查詢，然后在其中添加一個(gè)用于調(diào)整的 .make-xs-column(4) 混入：

<span style="color: #000000;">li {
  .make-xs-column(6);
<span style="background-color: #ccffcc;"> @media screen and (max-width:@screen-xs-max){
    .make-xs-column(4);
   }<br></span>   ...</span>

現(xiàn)在保存，編譯，刷新瀏覽器，查看效果。但是我們可能會(huì)發(fā)現(xiàn)側(cè)邊欄靠左對齊的，右側(cè)留白太多。而且商品網(wǎng)格的顯示有問題每行只顯示了一個(gè)商品。

很明顯，首先我們需要使側(cè)邊欄居中，使用?.center-block() 這個(gè)Bootstrap 的混入就可以了，代碼如下

<span style="color: #000000;">.grid-options {
   ...
   .center-block();</span>

另外，商品的顯示問題，調(diào)試發(fā)現(xiàn)是上一章中CSS選擇器?div[role="main"]?[class*="col-"]清除浮動(dòng)造成的。

所以，我們只需要不清楚浮動(dòng)就可以了：

<span style="color: #000000;">.product-item { 
  ...
  clear:none !important;
  ...</span>

現(xiàn)在的效果就可以了：

3.7 在手機(jī)上折疊選項(xiàng)面板

現(xiàn)在，篩選項(xiàng)占據(jù)了相當(dāng)對的垂直空間。這在小屏幕上是個(gè)問題，會(huì)把商品網(wǎng)格推到頁面下方很遠(yuǎn)的地方。

原因就是篩選項(xiàng)不必要地占據(jù)了大量空間。商品本身才是最應(yīng)該首先顯示的。我們既要讓用戶迅速看到商品，也可以在需要時(shí)打開篩選項(xiàng)。

為此，我們使用 Bootstrap 的折疊插件。下面幾步講解如何對選項(xiàng)面板使用折疊插件，同時(shí)添加一個(gè)擴(kuò)展面板的按鈕，并把折疊行為限定在窄視口中。

(1) 打開 html 文檔，添加一個(gè)div標(biāo)簽，包裝 Clearance Sale 按鈕和三個(gè)選項(xiàng)列表。給這個(gè)div 添加一個(gè)特殊的類 collapse，以及一個(gè)唯一的 ID，以便 JavaScript 插件找到它，同時(shí)也添加一個(gè)同名的類,代碼如下（可以參考文檔：http://getbootstrap.com/javascript/#collapse）：

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="grid-options col-sm-3"</span><span style="color: #0000ff;">></span>
   <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Narrow your selection<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
  <span style="background-color: #ccffcc;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="options-panel"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="options-panel collapse"</span><span style="color: #0000ff;">></span></span><span style="color: #000000;">
    ...
   </span><span style="background-color: #ccffcc;"><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

(2) 保存文件并刷新瀏覽器。你會(huì)發(fā)現(xiàn) Clearance Sale 按鈕和選項(xiàng)列表從眼前消失了。只剩下選項(xiàng)面板上方的 h2 標(biāo)題了，效果圖如下：

現(xiàn)在需要一個(gè)切換按鈕，在點(diǎn)擊時(shí)顯示篩選項(xiàng)。

(3) 然后我們在這個(gè)h2標(biāo)題中添加一個(gè)button按鈕以及相應(yīng)屬性如下：

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="grid-options col-sm-3"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">h2 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="clearfix"</span><span style="color: #0000ff;">></span><span style="color: #000000;">Narrow your selection
  </span><span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="options-panel-toggle btn btn-primary pull-right"</span><span style="color: #ff0000;"> data-toggle</span><span style="color: #0000ff;">="collapse"</span><span style="color: #ff0000;"> data-target</span><span style="color: #0000ff;">="#options-panel"</span><span style="color: #0000ff;">></span> <br><span style="color: #0000ff;">  <</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="icon fa fa-cog fa-2x"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> 
<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span><span style="color: #000000;">
...</span>

簡單解釋下上面的標(biāo)記：

□ 給 h2 添加的 clearfix 類可以確保它包含切換按鈕，因?yàn)榍袚Q按鈕是浮動(dòng)到右邊的；

□ 類 btn 和 btn-primary 會(huì)給新的按鈕添加 Bootstrap 的基本按鈕樣式，背景顏色為 @brand-primary；

□ 類 pull-right 會(huì)把按鈕浮動(dòng)到右側(cè)；

□ 在 button 元素中，放了一個(gè) Font Awesome 齒輪圖標(biāo)，使用 fa-2x 類放大到兩倍。

保存并刷新瀏覽器，可以看到顯示效果如下：

(4) 下面要寫一些規(guī)則，在中大屏幕中隱藏切換按鈕并展開選項(xiàng)面板。為此，可以在?_product-grid.less 中添加以下規(guī)則：

<span style="color: #000000;">@media (min-width:@screen-sm-min){
  .options-panel{
    display:block;
  }
  .options-panel-toggle {
    display:none;
  }
}</span>

(5) These rules work as follows:

□ Media query ensures that rules are only applied to small, medium and large viewports;

□ The first rule counteracts the effect of collapse class, which hides elements by default;

□ The second one hides the toggle button.

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

In ultra-small viewports, the options list is collapsed but the toggle button is visible:

In small, medium, and large viewports, the toggle button is hidden and the option list is visible:

In this way, our page is completed.

4. Summary

For this example, we did the following:

□ Use Bootstrap styles to quickly implement breadcrumbs, page titles and

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress images for free

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5060533 fails to install in Windows 10?

3 weeks ago By DDD

Dune: Awakening - Where To Get Insulated Fabric

3 weeks ago By Jack chen

Gmail Login: How to Sign Up, Sign In, or Sign Out of Gmail - MiniTool

1 months ago By Jack chen

How to fix KB5060999 fails to install in Windows 11?

3 weeks ago By DDD

Guild Guide In Tainted Grail: The Fall Of Avalon

4 weeks ago By Jack chen

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

8517

Java Tutorial

1742

CakePHP Tutorial

1596

Laravel Tutorial

1536

PHP Tutorial

1396

Related knowledge

Explain the purpose of the role attribute in ARIA. Jun 14, 2025 am 12:35 AM

ARIA's role attribute is used to define the role of web elements and improve accessibility. 1. Role attribute helps assistive technology to understand the functions of elements, such as buttons, navigation, etc. 2. Use role attributes to assign specific roles to non-semantic HTML elements. 3. The role attribute should be consistent with the element behavior and be verified by the accessibility tool test.

HTML and Design: Creating the Visual Layout of Websites Jun 14, 2025 am 12:39 AM

How to create a website layout? 1. Use HTML tags to define the content structure, such as, ,. 2. Control styles and positions through CSS, using box model, float or Flexbox layout. 3. Optimize performance, reduce HTTP requests, use cache and optimize images, and ensure responsive design.

How can you ensure your HTML code is readable and maintainable? Jun 10, 2025 am 12:06 AM

Improve the readability and maintainability of HTML code can be achieved through the following steps: 1. Use semantic tags, such as, etc. to make the code structure clear and improve SEO effect; 2. Keep the code formatted and use consistent indentation and spaces; 3. Add appropriate comments to explain the code intention; 4. Avoid excessive nesting and simplify the structure; 5. Use external style sheets and scripts to keep the HTML concise.

How do I stay up-to-date with the latest HTML standards and best practices? Jun 20, 2025 am 08:33 AM

The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.

How do I use the element to represent the main content of a document? Jun 19, 2025 pm 11:09 PM

The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.

How do I create a basic HTML document? Jun 19, 2025 pm 11:01 PM

To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.

How do I create checkboxes in HTML using the element? Jun 19, 2025 pm 11:41 PM

To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.

What is an HTML tag? Jun 13, 2025 am 12:36 AM

HTMLtagsareessentialforstructuringwebpages.Theydefinecontentandlayoutusinganglebrackets,ofteninpairslikeand,withsomebeingself-closinglike.HTMLtagsarecrucialforcreatingstructured,accessible,andSEO-friendlywebpages.

See all articles

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

[Reading Notes 'Bootstrap Practical Combat'] 5. E-commerce website

Hot AI Tools

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics