Implementierungsprozess des Bootstrap-Grundlayouts (Codebeispiel)-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Implementierungsprozess des Bootstrap-Grundlayouts (Codebeispiel)

不言

Oct 15, 2018 pm 04:30 PM

bootstrap

In diesem Artikel geht es um den Implementierungsprozess des Grundlayouts von Bootstrap (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

(Kostenlose Kursempfehlung: Bootstrap-Tutorial)

1. Erstellen Sie eine Basisseite

Lassen Sie uns sie erstellen 1. Eine einfache HTML-Vorlagenseite, die direkt mit sublime + emmet erstellt werden kann.

1.1 Erstellen Sie eine neue Datei, Strg + N

1.2 Speichern Sie sie in der Seitendatei, Strg + S, nennen Sie sie index.html

1.3 Auf dieser leeren Seite Geben Sie html:5 ein und drücken Sie dann direkt die Tabulatortaste. Sie sollten nun eine einfache HTML5-Vorlagenseite sehen können.

1.4 Speichern Sie erneut und drücken Sie Strg + S.

Der Seiteninhalt sollte wie folgt aussehen:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Nach dem Login kopieren

2. Bootstrap-Dateireferenz hinzufügen

Erstellen Sie in dem Ordner, in dem sich die Datei index.html befindet, einen CSS-Ordner, um alle Stildateien zu speichern, und erstellen Sie einen Ordner namens Bootstrap im CSS-Unterordner, um unsere Bootstrap-Dateien zu speichern.

Sie können das Bootstrap-Paket von der offiziellen Bootstrap-Website herunterladen, die über einen Dist-Ordner verfügt, der drei Unterordner enthält: CSS, Font und JS. Kopieren Sie diese drei Unterordner in Ihren CSS/Bootstrap-Ordner.

Die Seite besteht aus zwei Teilen des Inhalts: Stilen und Skripten.

2.1 Stilreferenz hinzufügen

Bootstrap-Stilreferenz in der Kopfzeile hinzufügen. Achten Sie auf den Weg.

<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>

Nach dem Login kopieren

bootstrap.min.css ist die Stildatei von Bootstrap, die alle Bootstrap-Stildefinitionen enthält, und bootstrap-theme.min.css ist die Designdefinition.

2.2 Skriptreferenz hinzufügen

Da Bootstrap ein jQuery-Skript verwendet, müssen Sie auch die jQuery-Skriptbibliothek herunterladen.

Erstellen Sie in dem Verzeichnis, in dem sich Ihre index.html-Datei befindet, ein Unterverzeichnis mit dem Namen lib, um die Skriptbibliothek für die zukünftige Verwendung zu speichern, und kopieren Sie die heruntergeladene jquery.min.js in dieses Verzeichnis.

Fügen Sie Jquery- und Bootstrap-Skriptbibliotheksreferenzen sofort zwischen Ihrem hinzu.

    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script>
    </body>

Nach dem Login kopieren

3. Bootstrap-Container hinzufügen

Die .container-Klasse von Bootstrap ist sehr nützlich. Sie kann einen zentrierten Bereich auf der Seite erstellen, und dann können wir andere Inhalte hinzufügen des Ortes wird im Inneren platziert. Die Containerklasse entspricht der Erstellung einer zentrierten P-Box mit einer statischen Breite und einem Magin-Wert von „auto“. Der Vorteil der Containerklasse von Twitter Bootstrap besteht darin, dass sie reagiert und die optimale Breite basierend auf der Breite des aktuellen Bildschirms berechnet und verwendet.

.container-fluid ist ein Behälter mit voller Breite, der die gesamte Breite nutzt.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

Nach dem Login kopieren

Erstellen Sie im Body-Tag ein p mithilfe der Containerklasse. Es dient als Hauptaußenpaket für die Platzierung anderer Codes auf der Seite. Sie können übrigens auch einen Titel hinzufügen.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
    <link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>
<body>
    <div>
    </div>
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Nach dem Login kopieren

Obwohl Sie im Browser noch nicht viel Inhalt sehen können, ist der Grundstein für nachfolgende Vorgänge gelegt.

4. Titel und Navigation

Jetzt können wir der Seite einige sichtbare Inhalte hinzufügen.

4.1 Titel

Das Hinzufügen eines Titels ist sehr einfach, fügen Sie einfach ein h1-Element hinzu.

<div class="container">
        <h1>Twitter bootstrap tutorial</h1>
</div>

Nach dem Login kopieren

Aktualisieren Sie die Seite und Sie sollten einen auffälligen Titel sehen. Als nächstes schauen wir uns die Navigation an.

4.2 Navigation

Navigation kann mit dem Navigationselement erstellt werden, und wir möchten eine Navigationsleiste erstellen, um Navigationselemente zu organisieren. In Bootstrap wird die Navigationsleiste aufgerufen navbar, weiter Füge dem Container eine Navigationsleiste hinzu.

 <div class="container">
        <h1>Twitter bootstrap tutorial</h1>
        <nav class="navbar navbar-inverse">
        </nav>
    </div>

Nach dem Login kopieren

navbar hilft uns beim Erstellen der Navigationsleiste. Die Standardhintergrundfarbe ist weiß, sodass die Hintergrundfarbe schwarz und der Text weiß ist, was auffälliger ist -fangen. Aktualisieren Sie nun die Seite und Sie sehen eine schwarze Navigationsleiste ohne Navigationsinhalte.

Navigationsinhalt wie folgt hinzufügen

    <div class="container">
        <h1>Twitter bootstrap tutorial</h1>
        <nav class="navbar navbar-inverse">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page One</a></li>
                    <li><a href="#">Page Two</a></li>
                </ul>
            </div>
        </nav>
    </div>

Nach dem Login kopieren

ul ist der eigentliche Navigationsinhalt, wobei .nav angibt, dass es sich um einen Navigationssatz handelt, und .navbar-nav angibt, dass er für die Navigation verwendet wird Navigationsleiste. li ist das eigentliche Navigationselement, und Sie können .active verwenden, um die aktuell aktive Navigation zu beschreiben.

Beachten Sie .navbar-collapse, was bedeutet, dass die Navigation vertikal wird, wenn die Breite des Ansichtsfensters weniger als 768 Pixel beträgt.

Größer als 768px

Weniger als 768px

4.3 Sandwich-Menü

Es ist nicht bequem, es in eine vertikale Navigation umzuwandeln. Wir hoffen, dass es zu einem beliebten Stil wird.

Wir müssen etwas zusätzliche Arbeit leisten. Einerseits müssen wir erklären, dass unsere spezifische Navigation angezeigt wird, wenn das Ansichtsfenster kleiner als eine bestimmte Breite ist Es werden zusätzliche Navigationsinhalte hinzugefügt.

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
</div>

Nach dem Login kopieren

Tatsächlich besteht es aus zwei Teilen. Der Knopfteil sieht nach viel aus und wird zum Zeichnen des Sandwich-Knopfes auf der rechten Seite verwendet. Das folgende Element ist die Navigation auf der linken Seite.

通常它不会显示出来。

然后，我们需要制定点击三明治按钮的时候，需要显示我们原来的导航。button 元素中，我们有一个 attribute ，data-target="#navbar-menu" ，就是用来完成这一步工作的，这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。

这样，我们的导航就是这样的了。

<h1>Twitter bootstrap tutorial</h1>
<nav class="navbar navbar-inverse">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div id="navbar-menu" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page One</a></li>
            <li><a href="#">Page Two</a></li>
        </ul>
    </div>
</nav>
</div>

Nach dem Login kopieren

5. 内容和边栏

主要内容部分，我们使用div来进行布局。

<div id="content" class="row-fluid">
        <div class="col-md-9">
            <h2>Main Content Section</h2>
        </div>
        <div class="col-md-3">
            <h2>Sidebar</h2>  
        </div>
    </div>

Nach dem Login kopieren

这里使用了 bootstrap 的栅格布局，栅格系统利用了12列的布局，这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。

这张表格则给出了详细的说明。

现在页面看起来是这样的。

6. 侧边栏导航

在侧边栏中添加一些导航内容。这里就是普通的导航，使用 .nav 进行声明，.nav-tabs 和 .nav-stacked 是导航的外观。

<div class="col-md-3">
    <h2>Sidebar</h2>
    <ul class="nav nav-tabs nav-stacked">
        <li><a href=&#39;#&#39;>Another Link 1</a></li>
        <li><a href=&#39;#&#39;>Another Link 2</a></li>
        <li><a href=&#39;#&#39;>Another Link 3</a></li>
    </ul>    
</div>

Nach dem Login kopieren

看看最终的效果，一个基于 bootstrap 的响应式布局页面就完成了。

Das obige ist der detaillierte Inhalt vonImplementierungsprozess des Bootstrap-Grundlayouts (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

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

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Will R.E.P.O. Crossplay haben?

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

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?

7549

CakePHP-Tutorial

1382

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So erhalten Sie die Bootstrap -Suchleiste Apr 07, 2025 pm 03:33 PM

So verwenden Sie Bootstrap, um den Wert der Suchleiste zu erhalten: Bestimmt die ID oder den Namen der Suchleiste. Verwenden Sie JavaScript, um DOM -Elemente zu erhalten. Holen Sie sich den Wert des Elements. Führen Sie die erforderlichen Maßnahmen aus.

So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

Wie man vertikale Zentrierung von Bootstrap macht Apr 07, 2025 pm 03:21 PM

Verwenden Sie Bootstrap, um die vertikale Zentrierung zu implementieren: FlexBox-Methode: Verwenden Sie den D-Flex, den Justify-Content-Center und die Ausrichtungsklassen aus Align-Item-Center, um Elemente in den Flexbox-Behälter zu platzieren. Methode für Ausstellungs-Iitem-Center-Klassen: Bei Browsern, die Flexbox nicht unterstützen, verwenden Sie die Klasse aus Align-items-Center-Klasse, vorausgesetzt, das übergeordnete Element hat eine definierte Höhe.

So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

See all articles