Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Beispiel für ein Bootstrap-Grid-Layoutsystem

PHPz
Freigeben: 2018-10-15 15:31:20
Original
4803 Leute haben es durchsucht

1. Grundprinzipien:

1. Stellen Sie sich den Bildschirm als ein geordnetes Raster/Raster/Zelle/Komposition entlang der horizontalen und vertikalen Richtung vor;

2. Alle Daten müssen platziert werden im Raster;

3. Responsives Layout verwenden, mobile Einstellungen zuerst

2. Bildschirmauflösungsaufteilung basierend auf

1. (Bildschirm < 768px): ultraklein Bildschirm col-xs-x

2. (768px <= Bildschirm < 992px): kleiner Bildschirm col-sm-x

3. (992px <= Bildschirm < 1200) : mittlerer Bildschirm col-md-x

4. (1200 <= Bildschirm): großer Bildschirm col-lg-x

2. Umsetzungsprinzip

1. Die Erster Schritt: Es muss ein Container erstellt werden, class="container"

2. Der zweite Schritt: Es muss eine Zeile erstellt werden, class="row"

3 .Schritt 3: Das Raster Es muss erstellt werden, Klasse = „col-md-x“, am Beispiel eines mittleren Bildschirms liegt der kritische Punkt bei 992 Pixel

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <script src="jquery-3.2.1.js"></script>
    <script src="dist/js/bootstrap.js"></script>
    <title>栅格布局系统</title>
    <style>
        .grid {
            border: 1px solid #696969;
            border-radius: 5px;
            background-color: lightskyblue;
            min-height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .green {
           background-color: lightgreen;
        }
        .pink {
            background-color: lightpink;
        }
    </style>
</head>
<body>
<div class="container">
    <h4>整行:</h4>
    <div class="row">
        <div class="col-md-12 grid">内容</div>
    </div>
    <h4>二等分:</h4>
    <div class="row">
        <!--<div class="col-md-6 grid">内容</div>-->
        <!--大屏39分-->
        <!--<div class="col-md-6 col-lg-3 grid green">内容</div>-->
        <!--小屏48分-->
        <div class="col-md-6 col-lg-3 col-sm-4 grid green">内容</div>
        <!--<div class="col-md-6 col-sm-8  grid">内容</div>-->
        <!--<div class=" col-md-6 grid">内容</div>-->
        <!--<div class=" col-md-6 col-lg-9 grid pink">内容</div>-->
        <div class=" col-md-6 col-lg-9 grid col-sm-8 pink">内容</div>
        <!--<div class=" col-md-6 col-sm-4 grid">内容</div>-->
    </div>
    <h4>三等分:</h4>
    <div class="row">
        <div class="col-md-4 grid">内容</div>
        <div class="col-md-4 grid">内容</div>
        <div class="col-md-4 grid">内容</div>
    </div>
    <h4>四等分:</h4>
    <div class="row">
        <div class="col-md-3 grid">内容</div>
        <div class="col-md-3 grid">内容</div>
        <div class="col-md-3 grid">内容</div>
        <div class="col-md-3 grid">内容</div>
    </div>
    <!--<h4>五等分:12除5除不尽,不用五等分</h4>-->
    <h4>六等分:</h4>
    <div class="row">
        <div class="col-md-2 grid">内容</div>
        <div class="col-md-2 grid">内容</div>
        <div class="col-md-2 grid">内容</div>
        <div class="col-md-2 grid">内容</div>
        <div class="col-md-2 grid">内容</div>
        <div class="col-md-2 grid">内容</div>
    </div>
    <h4>四八开:</h4>
    <div class="row">
        <div class="col-md-4 grid">内容</div>
        <div class="col-md-8 grid">内容</div>
    </div>
    <h4>三九开:</h4>
    <div class="row">
        <div class="col-md-3 grid">内容</div>
        <div class="col-md-9 grid">内容</div>
    </div>
</div>
</body>
</html>
Nach dem Login kopieren

[Verwandte Videoempfehlung:Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonBeispiel für ein Bootstrap-Grid-Layoutsystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!