Twitter Bootstrap Basics

Twitter Bootstrap kann Ihnen dabei helfen, schnell schöne Webanwendungen zu erstellen, indem es nützliches CSS und JavaScript bereitstellt. Hier erfahren Sie, wie Sie es in Rails mit dem Gem twitter-bootstrap-rails einbinden können.

Twitter's Bootstrap hilft Ihnen dabei, schnell schöne Webanwendungen zu erstellen. Es bietet eine Vielzahl von CSS- und JavaScript-Funktionen für das Erstellen von Layouts, Navigation, Formularen und vielem mehr. Es enthält sogar Unterstützung für responsives Webdesign. Zum Beispiel ändert sich auf der Homepage von Bootstrap das Layout der Seite, um am besten zur Breite des Browserfensters zu passen, wenn Sie die Breite des Fensters ändern. Dies kann die Benutzererfahrung bei der Verwendung von Webanwendungen auf mobilen Geräten erheblich verbessern.

Es lohnt sich, sich etwas Zeit zu nehmen, um die Website von Twitter Bootstrap zu erkunden und alles zu sehen, was es bietet. In dieser Episode zeigen wir Ihnen jedoch, wie Sie es mit einer Rails-Anwendung verwenden können. Eine Option besteht darin, den statischen CSS- und JavaScript-Code herunterzuladen, indem Sie auf die Schaltfläche "Bootstrap herunterladen" klicken, und dann die entsprechenden Dateien in das Verzeichnis /app/assets verschieben. Dies ist jedoch nicht der beste Ansatz, wenn Sie Rails verwenden. Twitter Bootstrap ist mit LESS geschrieben, einem CSS-Präprozessor, der SASS sehr ähnlich ist, das von Rails verwendet wird.

Um die größtmögliche Flexibilität von Twitter Bootstrap zu erhalten, ist es am besten, es mit einer dynamischen Sprache wie LESS zu verwenden, anstatt die statisch kompilierten Dateien zu verwenden, die es ausgibt. Um LESS mit Rails zum Laufen zu bringen, benötigen wir die Hilfe einiger Ruby-Gems. Es gibt mehrere Gems, die Bootstrap in Rails integrieren. In dieser Episode werden wir das Gem twitter-bootstrap-rails verwenden, aber wir werden später einige der Alternativen erwähnen. Wir haben uns für dieses Gem entschieden, da es direkt mit LESS arbeitet und einige praktische Generatoren bietet, um uns den Einstieg zu erleichtern. Wir sind hier jedoch ein wenig voraus, da wir noch keine Rails-Anwendung haben, mit der wir arbeiten können.

Hinzufügen von Bootstrap zu einer neuen Rails-Anwendung.

Wir werden mit einer neuen Anwendung beginnen, die wir "store" nennen, und wir werden ein Scaffold für ein Produktmodell generieren, damit wir etwas zum Arbeiten haben.

$ rails new store_bootstrapp
$ cd store_bootstrapp
$ rails g scaffold product name price:decimal
$ rails db:migrate

Wir haben auch die Datenbank migriert, damit die Tabelle für Produkte erstellt wird. So sieht die generierte Scaffold-Seite aus. Sie sieht nicht sehr ansprechend aus, da wir kein Styling angewendet haben. Es ist Zeit, Twitter Bootstrap hinzuzufügen.

Der erste Schritt besteht darin, das Gem bootstrap in der Gemfile hinzuzufügen.

// Gemfile

gem 'bootstrap'
gem 'sassc-rails'

Dann im Terminal:

$ bundle install
$ ./bin/importmap pin jquery

Und jetzt noch entsprechendes in die bootstrap in das manifest schreiben und den server neu starten.

// app/assets/config/manifest.js

//= link bootstrap.js

Wir importieren jquery und bootstrap ind application.js.

// app/javascript/application.js

@import 'jquery';
@import 'bootstrap';

Als nächstes importieren wir bootstrapp in eine _main.scss Datei die wir erstellen müssen.

// app/assets/stylesheets/_main.scss

@import 'bootstrap'

Verbesserung des Layouts

Wir werden uns zuerst auf das Layout der Anwendung konzentrieren. Wir werden die Schritte durchgehen, die erforderlich sind, um das Layout zu ändern, um Ihnen eine bessere Vorstellung davon zu geben, wie Twitter Bootstrap funktioniert.

Wir fügen dem Body der Layout-Datei ein Div mit der Klasse container hinzu.

// app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>

  <head>
    <title>StoreBootstrap</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <div class="container">
      <%= yield %>
    </div>
  </body>

</html>

Twitter Bootstrap verwendet ein 12-Spalten-Rastersystem. Dies erleichtert die Implementierung von Layout-Designs auf Basis von Spalten, indem die Breite jeder Spalte festgelegt wird. Dieses Layout ist responsiv, sodass sich das Layout entsprechend ändert, wenn wir die Breite des Browsers reduzieren. Angenommen, wir möchten eine Seitenleiste in unserem Design haben und diese soll 25% der Breite der Seite einnehmen. Das können wir tun, indem wir die Layout-Datei wie folgt ändern. Wir fügen vorerst nur statischen Text zur Seitenleiste hinzu.

// app/views/layouts/application.html.erb

    <div class="container">
      <div class="row">
        <div class="col-9"><%= yield %></div>
        <div class="col-3">
          <h2>About Us</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.</p>
        </div>
      </div>
    </div>

Wenn wir die Seite jetzt neu laden, sehen wir unser neues Zwei-Spalten-Layout.

Hinzufügen einer Navigationsleiste

Als Nächstes fügen wir eine Navigationsleiste oben auf der Seite mit einigen Links zum Navigieren auf der Website hinzu. Der Abschnitt "Components" der Dokumentation beschreibt die verschiedenen Navigationsoptionen, die Twitter Bootstrap bietet, einschließlich einer Navbar. Diese Navbar kann an unsere Bedürfnisse angepasst werden, und wir können Links, Dropdown-Abschnitte, Suchfelder usw. hinzufügen. Die Dokumentation enthält gute Beispiele, wie wir jeden Typ von Element hinzufügen können. Wir fügen unsere Navbar oben im Body der Layout-Seite hinzu.

// app/views/layouts/application.html.erb

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">Some Store</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
      <div class="d-flex">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <%= link_to "Browse Products", products_path, class: "nav-link" %>
          </li>
          <li class="nav-item"><%= link_to "Price List", "", class: "nav-link" %></li>
          <li class="nav-item"><%= link_to "Contact Us", "", class: "nav-link" %></li>
          <li class="nav-item"><%= link_to "Cart", "", class: "nav-link" %></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Unsere Navigation enthält einen Bereich für den Markennamen und einige Platzhalterlinks. Der Abschnitt oben ist interessant. Er behandelt das Kollapsverhalten, wenn der Browser die Größe für die Navigation ändert. Wenn Sie die Seite jetzt neu laden, wird unsere neue Navbar angezeigt.

Beachten Sie, dass wir die geklappte Version der Navigation sehen. Dies liegt daran, dass die Breite des Browserfensters auf etwa 800px eingestellt ist, was bedeutet, dass es nicht breit genug ist, um die vollständige Version anzuzeigen. Wenn wir das Fenster verbreitern, wird die Navigation angezeigt.

Es gibt jedoch ein Problem, wenn wir dies tun. Der oberste Teil der Seite wird vom Navigationsmenü (Navbar) verdeckt. Dies ist eine Nebenwirkung der Verwendung einer fixierten Navbar, und in der Dokumentation wird uns mitgeteilt, dass wir, um diese unerwünschte Wirkung zu vermeiden, mindestens 40 Pixel Padding oben am Body-Element zwischen dem Bootstrap CSS und dem Responsive CSS hinzufügen sollten. Wir tun dies innerhalb der CSS-Datei "bootstrap_and_overrides". Diese Datei enthält die Bootstrap- und Responsive-Dateien, und in der Dokumentation wird darauf hingewiesen, dass zwischen diesen Elementen Padding hinzugefügt werden muss.

// app/assets/stylesheets/_main.scss

body {
  padding-top: 80px;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Letzte Anpassungen am Header

Die Layoutdatei unserer Anwendung ist jetzt weitgehend abgeschlossen, aber es gibt noch ein paar Dinge, die wir im Kopfbereich hinzufügen müssen, um sicherzustellen, dass sie überall funktioniert.

// app/views/layouts/application.html.erb

<head>
  <title>StoreBootstrap</title>
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>
</head>

Der erste Codeabschnitt, den wir hier hinzugefügt haben, verbessert die Unterstützung von HTML5 in älteren Versionen des Internet Explorers. Der zweite ist ein Meta-Tag für den Viewport, und dies korrigiert das reaktionsfähige Designverhalten auf mobilen Geräten.

Die Ansichten verbessern

Was ist mit den anderen Ansichten in dieser Anwendung? Twitter Bootstrap bietet viele Funktionen, die den Look des von der Vorlage generierten Codes verbessern können. Zuerst werden wir einige Produktprotokolle hinzufügen, damit wir mehr Inhalte zum Arbeiten haben.

Ähnliche Änderungen wurden auf den Seiten für die Anzeige und Bearbeitung eines einzelnen Produkts angewendet. Wir können den Quellcode für diese Vorlagen anzeigen, um genau zu sehen, wie dies funktioniert.

// app/views/products/index.html.erb

<p style="color: green"><%= notice %></p>

<h1>Products</h1>
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
      <th>Created at</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% @products.each do |product| %>
    <tr>
      <td><%= product.id %></td>
      <td><%= link_to product.name, product_path(product) %></td>
      <td><%= product.price %></td>
      <td><%= product.created_at %></td>
      <td>
        <%= link_to 'Edit', edit_product_path(product), :class => 'btn btn-sm btn-secondary' %>
        <%= link_to 'Destroy', product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-sm btn-danger' %>
      </td>
    </tr>
    <% end %>
  </tbody>
</table>

<%= link_to 'New', new_product_path, :class => 'btn btn-primary' %>

Ein paar CSS-Klassen wurden zu der Tabelle hinzugefügt, die die Produkte anzeigt. Ebenso wurden Klassen zu den Links 'Bearbeiten' und 'Löschen' hinzugefügt, um ihr Erscheinungsbild zu verbessern. Die größte Änderung wurde an dem Ausschnitt vorgenommen, der das Formular für das Erstellen oder Bearbeiten eines Produkts enthält.

// app/views/products/_form.html.erb

<%= form_with(model: product, :html => { :class => 'form-horizontal' }) do |form| %>
<% if product.errors.any? %>
<div style="color: red">
  <h2><%= pluralize(product.errors.count, "error") %> prohibited this product from being saved:</h2>

  <ul>
    <% product.errors.each do |error| %>
    <li><%= error.full_message %></li>
    <% end %>
  </ul>
</div>
<% end %>
<fieldset>
  <div class="col-auto">
    <%= form.label :name, :class => 'form-label' %>
    <div class="forms">
      <%= form.text_field :name, :class => 'form-control' %>
    </div>
  </div>

  <div class="col-auto">
    <%= form.label :price, :class => 'form-label' %>
    <div class="forms">
      <%= form.text_field :price, :class => 'form-control' %>
    </div>
  </div>

  <div class="col-auto mt-5">
    <%= form.submit nil, :class => 'btn btn-primary' %>
    <%= link_to 'Cancel', products_path, :class => 'btn' %>
  </div>
</fieldset>
<% end %>

// app/views/products/show.html.erb

<p style="color: green"><%= notice %></p>
<%= render @product %>
<div>
  <%= link_to "Edit this product", edit_product_path(@product), class: 'btn btn-sm btn-secondary' %>
  <%= link_to "Back to products", products_path, class: "btn btn-sm btn-primary" %>
  <%= button_to "Destroy this product", @product, method: :delete, class: 'btn btn-danger mt-5' %>
</div>

Der Code hier hat sich erheblich von dem Generierungscode verändert und dient als gutes Beispiel dafür, wie man mit Twitter Bootstrap ein Formular wirklich ansprechend gestalten kann.

Meld dich an und schreibe ein Kommentar