Bootstrap-Basisanleitung

Bootstrap-Plugins

Bootstrap-Layout Bootstrap-CSS-Übersicht

Bootstrap-Grid-System

In diesem Kapitel werden wir das Grid-System von Bootstrap (Grid-System) erläutern.

Bootstrap provides a responsive, mobile-first, fluid grid system that automatically divides into a maximum of12Columns.

What is Grid (Grid)?

Excerpted from Wikipedia:

In flat design, a grid is a structure (usually two-dimensional) composed of a series of intersecting lines (vertical, horizontal) used to organize content. It is widely used in design layouts and content structures in print design. In web design, it is a method used to quickly create consistent layouts and effectively use HTML and CSS.

In simple terms, the grid in web design is used to organize content, making the website easy to navigate and reducing the load on the user's end.

What is the Bootstrap grid system (Grid System)?

The description of the grid system in the official Bootstrap documentation:

Bootstrap includes a responsive, mobile-first, fluid grid system that can appropriately expand to 12 Columns. It includes predefined classes for simple layout options, as well as powerful mixed classes for generating more semantic layouts.

Let's understand the above statement. Bootstrap 3 is mobile-first in the sense that Bootstrap code starts from small-screen devices (such as mobile devices, tablets) and then expands to components and grids on large-screen devices (such as laptops, desktop computers).

Mobile-First Strategy

Content

decides what is most important.

Layout

Prioritize designing for smaller widths.
The basic CSS is mobile-first, and media queries are for tablets and desktop computers.

Progressive Enhancement

elements as the screen size increases.

A responsive grid system automatically divides into a maximum of12Columns.

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

The working principle of the Bootstrap grid system (Grid System)

The grid system creates page layout through a series of rows and columns that contain content. The following lists how the Bootstrap grid system works:

Rows must be placed within .container within the class, in order to achieve proper alignment (alignment) and inner padding (padding).
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns can be direct children of rows.
Predefined grid classes, such as .row und .col-xs-4and can be used to quickly create a grid layout. LESS mixed classes can be used for more semantic layouts.
Columns are created by the inner padding (padding) between column content. This inner padding is determined by .rows The outer margin (margin) is negative, indicating the line offset of the first column and the last column.
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4.

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些指定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/*　超小设备（手机，小于　768px）　*/
/*　Bootstrap　中默认情况下没有媒体查询　*/
/*　小型设备（平板电脑，768px　起）　*/
@media　(min-width:　@screen-sm-@media　(min
/*　中型设备（台式电脑，992px　起）　*/
@media　(min-width:　@screen-md-@media　(min
/*　大型设备（大台式电脑，1200px　起）　*/
@media　(min-width:　@screen-lg-@media　(min

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media　(max-width:　@screen-xs-max)　{　...　}
@media　(min-width:　@screen-sm-min)　and　(max-width:　@screen-sm-max)　{　...　}
@media　(min-width:　@screen-md-min)　and　(max-width:　@screen-md-max)　{　...　}
@media　(min-width:　@screen-lg-@media　(min

媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：

让我们来看下面这行代码：

@media　(min-width:　@screen-sm-min)　and　(max-width:　@screen-sm-max)　{　...　}

对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
Spaltenreihenfolge	Yes	Yes	Yes	Yes

基本的网格结构

下面是 Bootstrap 网格的基本结构：

<div>
　　　<div>
　　　　　　<div></div>
　　　　　　<div></div>　　　　　　
　　　</div>
　　　<div>.../div>
</div>
<div>....

让我们来看几个简单的网格示例：

响应式的列重置

以下示例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。

为了解决这个问题，可以使用 .clearfix Klassen und Responsive Hilfsmittelwie im folgenden Beispiel gezeigt:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Bootstrap Beispiel　-　Responsive Spalten neu zuordnen</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<div class="row">
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　<p>Lassen Sie uns hier zusammen sitzen und unseren Liebsten gratulieren.</p>
　　　　　　</div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;Box-Schatten:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　<p>Ich bete für dich, dass du immer glücklich bist. Meine Arbeit ist zufällig. Ich habe nur ein kleines Mut, ich gehe in das Labor, das ist eine Konsequenz.
　　　　　　　　　</p>
　　　　　　　　　<p>Lassen Sie uns zusammen sitzen und unseren Freunden gratulieren, ihnen gratulieren.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="clearfix visible-xs"></div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-Schatten:inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　<p>Ein bisschen Zeit und der Praktikum ist erledigt.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;Box-Schatten:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　<p>Arbeit und Leid, voller Energie, daher, einige großartige Lebensdauermodelle. In diesen Jahren.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Browserfenstergröße anpassen, um die Änderungen zu betrachten oder auf Ihrem Telefon zu überprüfen.

Verschiebungs-Spalte

Verschiebungen sind eine nützliche Funktion für professionellere Layouts. Sie können verwendet werden, um mehr Raum für Spalten zu schaffen. Zum Beispiel.col-xs-* Klassen unterstützen keine Verschiebung, können aber einfach durch die Verwendung einer leeren Zelle dieses Effekt erreichen.

Um eine Verschiebung auf großen Bildschirmen zu verwenden, verwenden Sie .col-md-Verschiebung-* Klassen. Diese Klassen erhöhen den linken Außenabstand (Margin) einer Spalte * Spalten, von denen * Der Bereich reicht von 1 bis 11.

In den folgenden Beispielen haben wir <div>..</div>Wir werden .col-md-Verschiebung-3 class, um diesen div zentriert zu machen.

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Bootstrap Beispiel　-　Verschiebungs-Spalte</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hallo, Welt!</h1>
　　　<div class="row">
　　　　　　<div　class="col-md-6　col-md-Verschiebung-3"　
　　　　　　　　　style="background-color:　#dedef8;Box-Schatten:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing　
　　　　　　　　　　　　elit.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Eingekapselte Spalte

Um ein standardmäßiges Raster in den Inhalt zu einbetten, fügen Sie eine neue .row, und in einer bestehenden .col-md-* In einer Spalte eine Gruppe hinzufügen .col-md-* Spalten. Die eingekapselten Zeilen sollten eine Gruppe von Spalten enthalten, deren Anzahl nicht überschreiten sollte12Tatsächlich gibt es keine Notwendigkeit, dass Sie gefüllt sein müssen12Spalten).

In den folgenden Beispielen hat das Layout zwei Spalten, die zweite Spalte wird in zwei Zeilen und vier Kisten unterteilt.

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Bootstrap Beispiel　-　Eingekapselte Spalte</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hallo, Welt!</h1>
　　　<div class="row">
　　　　　　<div　class="col-md-3" style="background-color:　#dedef8;Box-Schatten:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　<h4>Erste Spalte</h4>
　　　　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
　　　　　　</div>
　　　　　　<div　class="col-md-9" style="background-color:　#dedef8;Box-Schatten:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　<h4>Zweite Spalte　-　in vier Kisten unterteilt</h4>
　　　　　　　　　<div class="row">
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　　　　　　　Gemeinsam, Kunst, Partei, Tonx, Schuld, Semiotik. Pinterest　
　　　　　　　　　　　　　　　　　　kleinster Organisch, wer sucht.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　　　　　　　gesagt, getan, getan　
　　　　　　　　　　　　　　　　　　aliqua. Ut enim ad minim veniam, quis nostrud exercitation　
　　　　　　　　　　　　　　　　　　ullamco laboris nisi ut aliquip ex ea commodo consequat.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　　　　<div class="row">
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　　　　　　　<p>quis nostrud exercitation ullamco laboris nisi ut　
　　　　　　　　　　　　　　　　　　aliquip ex ea commodo consequat.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>　　　
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,　
　　　　　　　　　　　　　　　　　　sed do eiusmod tempor incididunt ut labore et dolore magna　
　　　　　　　　　　　　　　　　　　aliqua. Ut enim ad minim.</p>
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Spaltenreihenfolge

Eine weitere perfekte Eigenschaft des Bootstrap-Grid-Systems ist, dass Sie Spalten leicht in einer Reihenfolge schreiben und in einer anderen Reihenfolge anzeigen können.

Sie können leicht Spalten mit .col-md-push-* und .col-md-pull-* der eingebauten Spaltenreihenfolge der Klasse, wobei * Der Bereich reicht von 1 bis 11.

In der folgenden Beispiel haben wir eine zwei-spaltige Anordnung, wobei das linke Spalten sehr schmal ist und als Seitenleiste dient. Wir werden .col-md-push-* und .col-md-pull-* Klassen um die Reihenfolge dieser beiden Spalten zu tauschen.

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Beispiel　-　Spaltenreihenfolge</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hallo, Welt!</h1>
　　　<div class="row">
　　　　　　<p>Sortiert vor</p>
　　　　　　<div　class="col-md-4" style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　Ich bin links
　　　　　　</div>
　　　　　　<div　class="col-md-8" style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444;">
　　　　　　　　　Ich bin rechts
　　　　　　</div>
　　　</div><br>
　　　<div class="row">
　　　　　　<p>Sortiert</p>
　　　　　　<div　class="col-md-4　col-md-push-8"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　
　　　　　　　　　inset　-1px　1px　1px　#444;">
　　　　　　　　　Ich bin links
　　　　　　</div>
　　　　　　<div　class="col-md-8　col-md-pull-4"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　
　　　　　　　　　inset　-1px　1px　1px　#444;">
　　　　　　　　　Ich bin rechts
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Bootstrap-Layout Bootstrap-CSS-Übersicht