Die besten Bootstrap-Beispiele

Bootstrap ist ein beliebtes Front-End-Framework für die Webentwicklung. Es enthält vorgefertigte Komponenten und Designelemente zum Gestalten von HTML-Inhalten. Moderne Browser wie Chrome, Firefox, Opera, Safari und Internet Explorer unterstützen Bootstrap.

Bootstrap enthält ein responsives Grid-System für unterschiedliche Layouts. Es ist ein guter Ausgangspunkt für die Erstellung einer mobilfreundlichen Website. Es enthält auch optionale JavaScript-Funktionen wie zusammenklappbare Inhalte, Karussells und Modalitäten.

Warum Bootstrap verwenden?

Bootstrap bietet eine einfache Lösung sowohl für das Design als auch für die Reaktionsfähigkeit. Es enthält zahlreiche schöne Elemente, die mit Ihrem eigenen benutzerdefinierten CSS weiterentwickelt werden können, sowie ein vollständiges Rastersystem, mit dem Ihre Website auf allen Bildschirmen reagiert und eine saubere und verständliche Syntax verwendet wird. Sie können eine professionell aussehende Website ohne CSS oder JavaScript erstellen und die Elemente bei Bedarf einfach anpassen

Versionsgeschichte

Twitter hat das Bootstrap-Framework ursprünglich als internes Tool entwickelt. Sie haben es im August 2011 als Open Source-Projekt veröffentlicht.

Bootstrap 2 wurde im Januar 2012 veröffentlicht. Eines der Hauptmerkmale war die Einführung des 12-Spalten-Responsive-Grid-Systems. Bootstrap 3 erschien im August 2013 und wechselte zu einem flachen Design und einem Mobile-First-Ansatz. Bootstrap 4 ist ab August 2017 in der Beta-Version verfügbar und enthält jetzt Sass und Flexbox.

Bootstrap 4 war zwei Jahre in der Entwicklung, bevor 2017 einige Beta-Versionen veröffentlicht wurden, während die erste stabile Version im Januar 2018 veröffentlicht wurde. Einige bemerkenswerte Änderungen umfassen:

  • Von Less zu Sass gewechselt;
  • Umzug in Flexbox und verbessertes Rastersystem;
  • Hinzugefügte Karten (Ersetzen von Vertiefungen, Miniaturansichten und Feldern);
  • Und vieles mehr!

Zum Zeitpunkt des Schreibens ist die neueste Version von Bootstrap 4.1.3. Wenn Sie über Neuigkeiten zu Ankündigungen auf dem Laufenden bleiben möchten, folgen Sie diesen hier.

Boostrap-Funktionen

  • Bootstrap 3 unterstützt die neuesten Versionen von Google Chrome, Firefox, Internet Explorer, Opera und Safari (außer unter Windows). Es unterstützt zusätzlich zurück zu IE8 und der neuesten Firefox Extended Support Release (ESR). [12]
  • Seit 2.0 unterstützt Bootstrap responsives Webdesign. Dies bedeutet, dass das Layout von Webseiten dynamisch angepasst wird, wobei die Eigenschaften des verwendeten Geräts (Desktop, Tablet, Mobiltelefon) berücksichtigt werden.
  • Ab Version 3.0 hat Bootstrap eine Mobile-First-Design-Philosophie übernommen, bei der standardmäßig Responsive Design im Vordergrund steht.
  • Version 4.0 hat Sass- und Flexbox-Unterstützung hinzugefügt.
  • Version 4.1 Neue benutzerdefinierte Bereichsformularsteuerung hinzugefügt.
  • Bootstrap beschränkt Sie nicht auf ein festes CSS-Format, sondern ermöglicht Ihnen die schnelle Entwicklung von Stilüberschreibungen mithilfe von Kaskadierung zum Hinzufügen / Bearbeiten der Standardstile.

Loslegen

Bootstrap ist ein kostenloses Open-Source-Framework, das von Twitter entwickelt wurde und eine Vielzahl von Vorlagen für die Front-End-Webentwicklung bietet. Die Verwendung von Bootstrap erleichtert das Entwerfen einer vollständig ansprechenden Website und ist ein lernenswertes Framework.

Wie füge ich meiner Seite Bootstrap hinzu?

Das Hinzufügen von Bootstrap zu Ihrer Seite ist ein schneller Vorgang. Fügen Sie einfach Folgendes zu den Tags in Ihrem Code hinzu.

Hinweis: Dies sind nur Beispiele und können ohne vorherige Ankündigung geändert werden. In einem CDN finden Sie aktuelle Links, die Sie in Ihr Projekt aufnehmen können.

Für einige Bootstrap-Komponenten sind andere JavaScript-Dateien erforderlich. In der Bootstrap-Dokumentation finden Sie die neuesten Skriptdateien.

Sie müssen außerdem Folgendes zwischen den bodyTags in Ihrem Code einfügen. Mit Bootstrap verwenden Sie Tags, wenn Sie viele der Bootstrap-Funktionen verwenden, z

Congratulations!

Bootstrap is now working on this page

Herzliche Glückwünsche!

Bootstrap arbeitet jetzt an dieser Seite

Installieren von Bootstrap mit einem Paketmanager

Ein beliebter Paketmanager ist NPM oder Node Package Manager. Sie müssen Node.js installieren, einschließlich des Node Package Managers. Besuchen Sie Node.js, laden Sie die erforderlichen Dateien basierend auf Ihrem Betriebssystem herunter und installieren Sie sie anschließend.

Öffnen Sie nach der Installation und Einrichtung die Befehlszeile oder Konsole und geben Sie Folgendes in den Projektordner ein, mit dem Sie Bootstrap verwenden möchten. Zum Zeitpunkt des Schreibens wird Bootstrap Version 4.0.0 installiert

npm install [email protected] --save

Sobald NPM das Herunterladen und Installieren von Bootstrap 4 abgeschlossen hat, wird node_modulesin Ihrem Projektordner ein neuer Ordner aufgerufen, sofern dieser noch nicht vorhanden ist.

  • /bootstrap welches die CSS- und Sass-Version unserer Dateien enthält.
  • /jquery Dies wird von Bootstrap in verschiedenen Komponenten verwendet.
  • /tether Dies ist eine Bibliothek für die Elementpositionierung.

Rastersystem

Kurz gesagt, das Bootstrap-Rastersystem hilft Ihnen beim Erstellen reaktionsschneller Layouts und besteht aus einem System von Zeilen und Spalten, mit denen Sie Ihre Inhalte strukturieren können.

Zeilen sind horizontale Gruppen von Spalten, und jede Seite enthält maximal 12 Spalten pro Zeile. Innerhalb jeder Zeile befindet sich der Inhalt innerhalb der Spalten und kann zwischen 1 und 12 Spalten umfassen.

Bootstrap verfügt über fünf verschiedene Arten von Rasterebenen: Extra klein, Klein, Mittel, Groß und Extra groß. Für jede dieser Rasterebenen ist ein Haltepunkt definiert. Bootstrap verwendet Pixel, um die Haltepunkte der Rasterebene zu definieren.

Container

Der Container ist das äußerste Element, das Ihr Raster enthält . Verwenden Sie diese Option containerfür einen Container mit fester Breite in der Mitte des Bildschirms (fügen Sie bei größeren Bildschirmen einen zusätzlichen Rand hinzu) oder container-fluidfür die volle Breite.

Reihe

Use row to group your columns. This will keep everything lined up properly and help you structure your grid.

Columns

Column classes indicate the number of columns you’d like to use out of the possible 12 per row. For example col-sm-6 would mean your columns use up half the width of the row on a small screen, and col-lg-4would use up a third on a large screen.

Here is how you would define a class prefix to use up one column width on the various screen sizes:

  • Extra Smallcol-1
  • Smallcol-sm-1
  • Mediumcol-md-1
  • Largecol-lg-1
  • Extra Largecol-xl-1

Example

A full width grid that has four columns, each taking up a full row on xs screens, half a row on sm and md screens, and a quarter of the width of the row on screens that are large and above:

 First Column Second Column Third Column Forth Column 

Note that col-md and col-xl are not defined, where a size is not defined, it will default down to the next smaller size that has been specified.

Bootstrap provides a ready-made 12 column grid system for use in layouts. Consider the following code.

 Content Content 

where:

- col = column - md = screen size - 6 = column width

As a 12 column grid system, all user defined grid column widths must add up to 12.

Screen size values can be assigned as follows:

  • xs - < 768px Phones
  • sm - < 992px Tablets
  • md - < 1200px Laptops
  • lg - > 1200px Desktops

The following code and image shows what is possible using different column widths.

 Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 

Buttons

The Bootstrap framework provides you with various styling options for buttons. These styles help you provide a visual representation to the user of what the button may do.

How To Use

To use bootstrap buttons you need to follow the same steps that you would to create a button in HTML, except that you also apply the applicable CSS class to the button. A code example has been provided below.

Code Example:

Primary

You can also use bootstrap buttons with the and elements as shown in the examples below. As per the Bootstrap documentation,

When using button classes on elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button"to appropriately convey their purpose to assistive technologies such as screen readers.

This button is a link

Button Class List

This is a list of the CSS classes that bootstrap provides for buttons. They give the background color to the buttons.

.btn This is bootstrap's basic button. It is a prerequisite if you want other bootstrap buttons to work properly.

Basic

.btn-primary Bootstrap's primary button. Default color displays #007bff.

Primary

.btn-secondary Bootstrap's secondary button. Default color displays #6c757d.

Secondary

.btn-success Bootstrap's success button. Default color displays #28a745.

Success

.btn-info Bootstrap's info button. Default color displays #17a2b8.

Info

.btn-warning Bootstrap's warning button. Default color displays #ffc107.

Warning

.btn-danger Bootstrap's danger button. Default color displays #dc3545.

Danger

.btn-link Bootstrap's link button.

Link

.btn-light Bootstrap's light button.

Light

.btn-dark Bootstrap's dark button.

Dark

.btn-dark This is bootstrap's dark button.

.btn-secondary This is bootstrap's secondary button.

Button Sizes

This is a list of the CSS classes for different size of the buttons.

.btn-lg Bootstrap's large button.

Large

.btn-md This is bootstrap's medium button.

Medium

.btn-sm Bootstrap's small button.

Small

.btn-md This is bootstrap's medium button.

.btn-xs This is bootstrap's extra small button.

Extra Small

.btn-block This is bootstrap's full width button.

Disabled Button State

This is used to show that the button is disabled by fading the button. This can be achieved through adding "disabled" to the tag.

.btn-block This is bootstrap's block level button. They actually span the entire width of their parent element. For example, a form element with a width of 200px, that means the btn-block button would have a width of 200px.

Outlined Buttons

It is possible to also have outlined buttons rather than fully colored buttons. This is achieved by placing the mid fix outline between the button class you want. A sample usage would be as follows:

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Outlined buttons are a part of Bootstrap since version 4 - please be sure that you are using the right version if you are unable to get them to work.

Inline Buttons

You can create inline button row by adding .d-inline-block class to the element which sets the display of the button to inline block. For example :

Grouping of Buttons

It is possible to group more than one button for certain uses like pagination. Grouping buttons can be done by making a parent div for all buttons you want to group, using the .btn-group class on this div:

 Left Middle Right 

Dropdowns

Bootstrap provides Dropdowns as a plugin for displaying lists of links. A dropdown is a button which toggles displaying a list of links.

Bootstrap’s dropdowns are designed to be generic and applicable to a variety of situations. For instance, it is possible to create dropdowns that contain search fields or login forms.

 Dropdown example Action Another action Something else here 

The .dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown attribute.

The .caret class creates a caret arrow icon (▼), which indicates that the button is a dropdown.

Add the .dropdown-menu class to a unordered list element to actually build the dropdown menu.

Navigation Bar

The Bootstrap framework provides you with a feature called navigation bars. In short, a navigation bar (also referred to as a navbar) is a header at the top of the page to display navigational information.

How To Use

To use Bootstrap Navigation Bars you add a element to the top inside the element of your webpage. There are various styles you can add to customize the display of your navbars.

This is the code needed to make a basic navbar:

 Site Name 
  • Home
  • Page 1
  • Page 2
  • Page 3

Navbar Styles

Bootstrap provides a set of classes in the Bootstrap framework to style your navbars. These classes are as followed:

  • navbar navbar-default This is the default style for your navbars.
  • navbar navbar-inverse This is similar to the default style except the colors are inverted.

Adding drop-down menus to the navbar

You can include a drop-down menu inside a navbar. This feature requires you to include Bootstrap's javascript file for it to work.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Adding buttons to the navbar

    You can add buttons on the navbar. The existing Bootstrap Button classes work however you'll need to include the class navbar-btn to the end of the class list.

    Button

    Adding brand logo or name to the navbar

    The navbar-brand class can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

      Navbar 
      Navbar 

    Adding forms to the navbar

    You can also add forms to the navbar. This could be used for tasks such as a search field, quick login field, etc.

     Search 

    Aligning elements to the right on the navbar

    In some cases you might want to align elements in a navbar to the right (for example a login or sign-up button.). To do this you'll need to use the navbar-right class.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    Displaying the navbar independent of scrolling

    In some cases you might want to keep the navbar at the top or bottom of the screen regardless of scrolling. You will need to add either the navbar-fixed-top or navbar-fixed-bottom class to the element.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    Collapsing the navbar

    On a small screen (such as a phone or tablet) the navbar is going to take up too much space. Luckily the option to collase the navbar exists. You can accomplish this using the following example.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    Jumbotron

    Jumbotron is Lightweight, flexible component for showcasing hero unit style content. Jumbotron is a responsive component which the main goal is to focus visitor's attention or highlight the special piece of information.

    Jumbotron make use of almost any other bootstrap code to additionally increase its engagement value. It's operate with images,enlarged fonts,different backgorund styles etc.

    Most Attracting features of jumbotron

    • Showcase the marketing messages on your site
    • Project presentation
    • Article introduction
    • Image showcase

    How to use

    Use a element with class .jumbotron to create a jumbotron:

    Hello, world!

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    It uses utility classes for typography and spacing to space content out within the larger container.

    Learn more

    Fluid jumbotron

    To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add a .container or .container-fluid within.

    Fluid jumbotron

    This is a modified jumbotron that occupies the entire horizontal space of its parent.

    Forms

    Bootstrap framework provides a form feature which you can use to create beautiful HTML forms easily. Using the Bootstrap form gives each individual form element a unified global style. Bootstrap form adds the right spacing and look to each element.

    Each Bootstrap form element should have a class form-control. This class is how Bootstrap knows which elements to style. All textual elements like input, textarea and select that have the form-control class will have 100% width by default.

    There are two types of Bootstrap forms, which are:

    • Inline form - creates the form on a single line. Useful for login forms in a nav bar
    • Horizontal form - creates a form with each element in a different row

    Example of a basic form

     Email address Password File input  

    Example block-level help text here.

    Check me out Submit

    Example of an inline form

     Name Email Send invitation 

    Example of horizontal form

     Email Password Remember me Sign in 

    Form Inputs

    Bootstrap supports the following form controls:

    1. input
    2. textarea
    3. checkbox
    4. radio
    5. select
    6. range

    1. Input

    Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

    Note: Inputs will NOT be fully styled if their type is not properly declared!

    The following example contains two input elements; one of type text and one of type password:

     Name: Password: 

    2. Textarea

    The following example contains a textarea:

     Comment: 

    3. Checkboxes

    Checkboxes are used if you want the user to select any number of options from a list of preset options.

    The following example contains three checkboxes. The last option is disabled:

     Option 1 Option 2 Option 3 

    Use the .checkbox-inline class if you want the checkboxes to appear on the same line:

    Option 1 Option 2 Option 3

    4. Radio Buttons

    Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

    The following example contains three radio buttons. The last option is disabled:

     Option 1 Option 2 Option 3 

    Use the .radio-inline class if you want the checkboxes to appear on the same line:

    Option 1 Option 2 Option 3

    5. Select (List)

    Select lists are used if you want to allow the user to pick from multiple options.

    The following example contains a dropdown list (select list):

     Select list:  1 2 3 4 

    6. Range

    Select lists are used if you want to allow the user to pick from multiple options.

    The following example contains a dropdown list (select list):

     Example Range input 

    How to make Bootstrap Inputs Accessible

    Input fields should have labels or some other form of identifier such as WAI-ARIA tags to meet the Web Content Accessibility Guidelines or WCAG for short. In order for screen readers to accurately convey to a user what labels are associated with which inputs the labels should reference the corresponding input.

    Dies kann durch Verwendung des forParameters im HTML erfolgen:

    Enter Email 

    Das label- forAttribut verweist immer anhand seiner ID auf das Eingabefeld . Dies teilt dem Bildschirmleser mit, dass dieses Etikett definitiv für dieses Eingabefeld bestimmt ist, wodurch Verwirrung für alle Benutzer minimiert wird, die einen Bildschirmleser verwenden, um eine Website zu besuchen. Wenn ein Benutzer im obigen Beispiel auf das tatsächliche Wort "E-Mail eingeben" klickt, kann er eingeben. Wenn das Attribut 'für' nicht an das Etikett angehängt wurde und ein Benutzer auf die Wörter 'E-Mail eingeben' klickt, passiert nichts. Der Benutzer müsste auf das eigentliche E-Mail-Eingabefeld klicken, um eingeben zu können.

    Tabellen

    Grundtabelle

    Um das grundlegende Styling-Beispiel zu erhalten, fügen Sie die Basisklasse .tablezu einer beliebigen hinzu

    Element.

    ...

    Tischkopf

    Sie können in Ihrer Tabellenstruktur einen separaten Header-Abschnitt definieren. Dies ist ein Beispiel

    #FirstLastHandle
    1BobRobo@bro

    Tisch gestreift

    Um den gestreiften Reiheneffekt (Zebrastreifen) in Tabellen zu erzielen, verwenden Sie .table-stripedzusätzlich zu .tablejedem

    Element. Gestreifte Tabellen werden über den :nth-childCSS-Selektor gestaltet, der in Internet Explorer 8 nicht verfügbar ist.

    ...

    Tabelle umrandet

    Um die umrandete Tabelle zu erreichen, verwenden Sie .table-borderedzusätzlich zu .tablejeder

    Element.

    ...

    Table Hover

    Um den Hover-Row-Effekt für Tabellen zu erzielen, verwenden Sie .table-hoverzusätzlich zu .tableany

    Element.

    ...

    Tabelle kondensiert

    Um den kondensierten Tisch zu erreichen, verwenden Sie .table-condensedzusätzlich zu .tablejedem

    Element.

    ...

    Tabelle Responsive

    Um die reaktionsfähige Tabelle zu erreichen, indem Sie eine beliebige .tableTabelle in ein .table-responsiveElement einschließen.

    Developers are able to change the style of each individual row and/or cell by using contextual classes.

    • .active - Applies the hover color to a particular row or cell
    • .success - Indicates a successful or positive action
    • .info - Indicates a neutral informative change or action
    • .warning - Indicates a warning that might need attention
    • .danger - Indicates a dangerous or potentially negative action