98精品国产综合久久久久久欧美,gogogo免费完整国语

Heim

Web-Frontend

HTML-Tutorial

[Lesenotizen ?Bootstrap Practical Combat'] 5. E-Commerce-Website

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 15, 2016 am 10:32 AM

Nachdem Sie die Unternehmenswebsite erstellt haben, k?nnen Sie über die Gestaltung eines Online-Shops nachdenken.

Dieses Design basiert auf dem Design im vorherigen Kapitel, mit der Ausnahme, dass eine neue Seite mit den folgenden Elementen hinzugefügt wurde:

□ Produktraster mit Produktminiaturansichten, Titeln und Beschreibungen;

□ Der Lazy-Button auf der linken Seite dient zum Filtern von Produkten nach Kategorie, Marke usw.

□ Breadcrumbs und Paginierungslinks für eine einfache Benutzernavigation.

Schauen wir uns zun?chst die Websites von Zappos (http://www.zappos.com/) und Amazon (https://www.amazon.com/) an und suchen bzw. durchst?bern Sie die Produkte. Die hier zu erstellende Seite enth?lt ein ?hnliches Produktraster.

Das fertige Design sollte auf gro?en, mittleren und kleinen Bildschirmen wie im folgenden Bild aussehen:

Auf ultrakleinen Bildschirmen soll das Layout der Seite so aussehen:

Bootstrap bietet einen guten Ausgangspunkt für die Vervollst?ndigung dieses Entwurfs. Auf dieser Grundlage werden wir LESS verwenden, um die Anpassungsarbeiten abzuschlie?en.

1. Markierungen auf der Produktseite

Wir k?nnen sehen, dass die Kopfzeile, der Inhalt der Navigationsleiste und die Fu?zeile mit dem vorherigen Kapitel übereinstimmen, haupts?chlich ist der Hauptinhalt unterschiedlich. Wie aus den Renderings hervorgeht, k?nnen wir den Hauptinhalt in drei Teile unterteilen:

Teil 1: Breadcrumb-Navigationslinks, die mithilfe ungeordneter Listen generiert werden.

Teil 2: Seitentitel dargestellt durch h1.

Teil 3:

□ Eine Reihe von Optionen zum Filtern von Produkten

□ Neun Produkte, jedes mit Miniaturansichten, Titeln, Beschreibungen und Schaltfl?chen

□ Paginierungslinks, die mithilfe einer ungeordneten Liste generiert werden und sich unter den Produkten und über der Fu?zeile der Website befinden.

1.1 Crumb-Navigationslink

Sie k?nnen sich auf die offizielle Dokumentation beziehen: http://getbootstrap.com/components/#breadcrumbs (chinesische Dokumentation: http://v3.bootcss.com/components/#breadcrumbs)

(1) ist sehr einfach. Geben wir zun?chst den Code gem?? dem Dokument wie folgt ein:

<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>

Sie k?nnen den Anzeigeeffekt wie folgt sehen:

(2) Anschlie?end passen wir das Design der Semmelbr?sel an und entfernen den hellgrauen Hintergrund und die zus?tzliche Polsterung. Für diese einfache Anpassung k?nnen wir die Datei breadcrumbs.less im Bootstrap-Ordner direkt ?ndern und die unn?tigen Zeilen auskommentieren, um Spuren der ?nderung zu hinterlassen:

<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>

Der Anzeigeeffekt nach der ?nderung ist wie folgt:

1.2 Seitentitel

Ebenso offizielle Dokumentation: http://getbootstrap.com/components/#page-header (Chinesische Dokumentation: http://v3.bootcss.com/components/#page-header)

(1) In ?hnlicher Weise k?nnen Sie unter Bezugnahme auf die Dokumentation den Code wie folgt eingeben:

<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>

Sie k?nnen den Anzeigeeffekt wie folgt sehen:

(2) Wir passen einfach den Stil an und l?schen den unteren Rand. ?ffnen Sie die Datei ?type.less“ im Bootstrap-Ordner, suchen Sie nach ?.page-header“ und kommentieren Sie die Regel ?border-bottom“ aus:

<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>

Speichern, kompilieren, aktualisieren und Sie werden sauberere Ergebnisse sehen. Mehr Leerraum passt zu unserem Gesamtdesign, wie unten gezeigt;

1.3 Seitenleiste, Produktraster, Seitenlinks

Unser Hauptanzeigeinhalt ist die Seitenleiste auf der linken Seite und das Produktraster auf der rechten Seite. Natürlich verwenden wir das Rastersystem, um es in zwei Teile zu unterteilen:

<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 Seitenleiste

Wir k?nnen sehen, dass die Seitenleiste aus mehreren Titeln, entsprechenden Optionen zum Filtern von Produkten und einer Hyperlink-Schaltfl?che besteht. Wir k?nnen den Code einfach wie folgt implementieren.

<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 Produktraster

Was das Produktraster betrifft, k?nnen wir sehen, dass es aus Produktrastern für neun Produkte und Paginierungslinks unter dem Produktraster besteht.

In ?hnlicher Weise verwenden wir ein Rastersystem, um einfach neun Produkte anzuzeigen, mit drei Produkten in jeder Zeile und insgesamt drei Spalten.

<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è)很簡(jiǎn)單，一般使用無序列表實(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)容就搭建起來了，我們需要的就是對(duì)商品網(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>

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

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

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

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

(2) 我們先調(diào)整下圖片寬度、字號(hà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è)指南，其中對(duì)每個(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)目符號(hào)，如下所示：

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

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)題的字號(hào)、行高和顏色。

3.2 Clearance Sale 按鈕

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

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

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

□ 添加自定義的按鈕類 btn-feature，這是我們?cè)谏弦徽聞?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 顯示為塊級(jí)元素，使用 .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è)置為相對(duì)定位，以便對(duì)標(biāo)簽應(yīng)用絕對(duì)定位；

(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，我們就用它作為選擇符，確保只針對(duì)這些特殊的列表。

首先去掉項(xiàng)目符號(hào)和內(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)邊距，并讓字號(hào)比標(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)的樣式。

對(duì)現(xiàn)在的需求來說，我們不需要選擇符也不需要花括號(hào)，只需要其中的規(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; }

對(duì)于前面這一行，我們只需要?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 混入在欄中對(duì)其選項(xiàng)

前面，我們使用 LESS 實(shí)現(xiàn)了以往需要通過添加標(biāo)記實(shí)現(xiàn)的功能。考慮到篩選項(xiàng)的數(shù)量很多，這樣做效率最高。同樣的思路也適用于我們對(duì)齊側(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è)混入加入的樣式與我們?cè)跇?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 針對(duì)平板和手機(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>

下面我們?cè)僬{(diào)整選項(xiàng)列表，讓它們?cè)谛∫暱谥酗@示為三欄。使用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è)邊欄靠左對(duì)齊的，右側(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)對(duì)的垂直空間。這在小屏幕上是個(gè)問題，會(huì)把商品網(wǎng)格推到頁面下方很遠(yuǎn)的地方。

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

為此，我們使用 Bootstrap 的折疊插件。下面幾步講解如何對(duì)選項(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) 然后我們?cè)谶@個(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>

簡(jiǎn)單解釋下上面的標(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) Diese Regeln funktionieren wie folgt:

□ Die Medienabfrage stellt sicher, dass Regeln nur auf kleine, mittlere und gro?e Ansichtsfenster angewendet werden

□ Die erste Regel wirkt dem Effekt der Collapse-Klasse entgegen, die standardm??ig Elemente ausblendet;

□ Die zweite Option verbirgt die Umschalttaste.

Speichern und aktualisieren, Sie sollten den gewünschten Effekt sehen k?nnen.

In sehr kleinen Ansichtsfenstern ist die Optionsliste reduziert, aber die Umschalttaste ist sichtbar:

In kleinen, mittleren und gro?en Ansichtsfenstern ist die Umschalttaste ausgeblendet und die Optionsliste sichtbar:

Damit ist unsere Seite komplett.

4. Zusammenfassung Für dieses Beispiel haben wir Folgendes getan:

□ Verwenden Sie Bootstrap-Stile, um Breadcrumbs, Seitentitel usw. schnell zu implementieren

Erkl?rung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Hei?e KI -Werkzeuge

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Wie kann ich KB5060999 in Windows 11 nicht installieren?

1 Monate vor By DDD

Oguri Cap Build Guide | Ein hübsches Derby -Musume

1 Wochen vor By Jack chen

Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough

3 Wochen vor By Jack chen

Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern

3 Wochen vor By DDD

Datum alles: Dirk und Harper Relationship Guide

3 Wochen vor By Jack chen

Hei?e Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hei?e Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

8522

Java-Tutorial

1747

CakePHP-Tutorial

1600

Laravel-Tutorial

1542

PHP-Tutorial

1400

Related knowledge

Erkl?ren Sie den Zweck des Rollenattributs in Aria. Jun 14, 2025 am 12:35 AM

Das Rollenattribut von ARIA wird verwendet, um die Rolle von Webelementen zu definieren und die Zug?nglichkeit zu verbessern. 1. Rollenattribut hilft bei der Unterstützung der Technologie, um die Funktionen von Elementen wie Schaltfl?chen, Navigation usw. zu verstehen. 3. Das Rollenattribut sollte mit dem Elementverhalten übereinstimmen und durch den Test -Tool -Test überprüft werden.

HTML und Design: Erstellen des visuellen Layouts von Websites Jun 14, 2025 am 12:39 AM

Wie erstelle ich ein Website -Layout? 1. Verwenden Sie HTML -Tags, um die Inhaltsstruktur zu definieren, z. B.,. 2. Kontrollstile und -positionen über CSS unter Verwendung des Boxmodells, des Float- oder Flexbox -Layouts. 3. Optimieren Sie die Leistung, reduzieren Sie HTTP -Anforderungen, verwenden Sie Cache und optimieren Sie Bilder und sorgen Sie für ein reaktionsschnelles Design.

Wie bleibe ich mit den neuesten HTML-Standards und Best Practices auf dem neuesten Stand? Jun 20, 2025 am 08:33 AM

Der Schlüssel, um mit HTML -Standards und Best Practices Schritt zu halten, liegt darin, dies absichtlich zu tun, anstatt ihm blind zu folgen. Befolgen Sie zun?chst die Zusammenfassung oder aktualisieren Sie Protokolle offizieller Quellen wie Whatwg und W3C, verstehen Sie neue Tags (wie) und Attribute und verwenden Sie sie als Verweise, um schwierige Probleme zu l?sen. Zweitens, abonnieren Sie vertrauenswürdige Webentwicklungs-Newsletter und Blogs und verbringen Sie 10-15 Minuten pro Woche, um Updates zu durchsuchen und sich auf tats?chliche Anwendungsf?lle zu konzentrieren, anstatt nur Artikel zu sammeln. Zweitens verwenden Sie Entwickler -Tools und Linter wie HTMLHINT, um die Codestruktur durch sofortiges Feedback zu optimieren. Interagieren Sie schlie?lich mit der Entwicklergemeinschaft, teilen Sie Erfahrungen und lernen Sie die praktischen F?higkeiten anderer Menschen, um die HTML -F?higkeiten kontinuierlich zu verbessern.

Wie verwende ich das -Element, um den Hauptinhalt eines Dokuments darzustellen? Jun 19, 2025 pm 11:09 PM

Der Grund für die Verwendung von Tags ist die Verbesserung der semantischen Struktur und Zug?nglichkeit von Webseiten, den Bildschirmlesern und Suchmaschinen einfacher, Seiteninhalte zu verstehen und Benutzer schnell auf Kerninhalte zu springen. Hier sind die Schlüsselpunkte: 1. Jede Seite sollte nur ein Element enthalten; 2. Es sollte keinen Inhalt enthalten, der über Seiten (z. B. Seitenleisten oder Fu?zeilen) wiederholt wird. 3.. Es kann in Verbindung mit ARIA -Eigenschaften verwendet werden, um die Zug?nglichkeit zu verbessern. Normalerweise befindet sich nach und zuvor und wird verwendet, um einzigartige Seiteninhalte wie Artikel, Formulare oder Produktdetails einzuwickeln und sollte in oder in oder in vermieden werden. Um die Zug?nglichkeit zu verbessern, k?nnen Aria-markierte oder ARIA-Label verwendet werden, um Teile klar zu identifizieren.

Wie erstelle ich ein grundlegendes HTML -Dokument? Jun 19, 2025 pm 11:01 PM

Um ein grundlegendes HTML -Dokument zu erstellen, müssen Sie zun?chst seine Grundstruktur verstehen und Code in einem Standardformat schreiben. 1. Verwenden Sie den Deklarationsdokumenttyp am Anfang; 2. Verwenden Sie das Tag, um den gesamten Inhalt zu wickeln. 3. Inklusive und zwei Hauptteile darin, die zum Speichern von Metadaten wie Titeln, Stylesheet-Links usw. verwendet werden und benutzerfreundliche Inhalte wie Titel, Abs?tze, Bilder und Links enthalten; 4. Speichern Sie die Datei im .html -Format und ?ffnen Sie den Betrachtungseffekt im Browser. 5. Dann k?nnen Sie nach und nach weitere Elemente hinzufügen, um den Seiteninhalt zu bereichern. Befolgen Sie diese Schritte, um schnell eine grundlegende Webseite zu erstellen.

Was ist ein HTML -Tag? Jun 13, 2025 am 12:36 AM

HtmltagsareessentialStructuringWebpages.theydedeContentandLayoutuSusingLebrackets, OftinpairsLikeand, mit somebeinsself-closen-like.htmltagsarecrucialForCreating-strukturiert, zug?nglich und seo-frantlywebppages.

Wie erstelle ich Kontrollk?stchen in HTML mit dem Element ? Jun 19, 2025 pm 11:41 PM

Verwenden Sie zum Erstellen eines HTML -Kontrollk?stchens das Typ -Attribut vom Typ, um das Element des Kontrollk?stchens festzulegen. 1. Die Grundstruktur enth?lt ID-, Name- und Etiketten -Tags, um sicherzustellen, dass das Klicken auf Text Optionen wechseln kann. 2. Mehrere zugeh?rige Kontrollk?stchen sollten denselben Namen, aber unterschiedliche Werte verwenden und sie mit Fieldset einwickeln, um die Zug?nglichkeit zu verbessern. 3. Ausblenden native Steuerelemente beim Anpassen von Stilen und verwenden Sie CSS, um alternative Elemente zu entwerfen und gleichzeitig die vollst?ndigen Funktionen beizubehalten. 4. Stellen Sie sicher, dass Sie die Verfügbarkeit sorgen, Etiketten koppeln, die Tastaturnavigation unterstützen und nicht auf visuelle Eingabeaufforderungen angewiesen sind. Die obigen Schritte k?nnen den Entwicklern dabei helfen, Checkbox -Komponenten mit funktionaler und ?sthetischer Art korrekt zu implementieren.

Wie minimiere ich die Gr??e von HTML -Dateien? Jun 24, 2025 am 12:53 AM

Um die Gr??e von HTML -Dateien zu verringern, müssen Sie redundante Code bereinigen, den Inhalt komprimieren und die Struktur optimieren. 1. L?schen Sie ungenutzte Tags, Kommentare und zus?tzliche Rohlinge, um das Volumen zu verringern. 2. Verschieben Sie das Inline -CSS und JavaScript in externe Dateien und verschmelzen Sie mehrere Skripte oder Stilbl?cke. 3.. Vereinfachen Sie die Beschriftungssyntax ohne die Parsen zu beeinflussen, z. 4. Aktivieren Sie nach der Reinigung serverseitige Komprimierungstechnologien wie Gzip oder Brotli, um das übertragungsvolumen weiter zu reduzieren. Diese Schritte k?nnen die Seitenladungsleistung erheblich verbessern, ohne die Funktionalit?t zu beeintr?chtigen.

See all articles

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

[Lesenotizen ?Bootstrap Practical Combat'] 5. E-Commerce-Website

Hei?e KI -Werkzeuge

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1

SublimeText3 chinesische Version

Senden Sie Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac-Version

Hei?e Themen