So erstellen Sie ein Bootstrap-Responsive-Layout

Das responsive Layout von Bootstrap nutzt sein Rastersystem und verwendet verschiedene Klassenattribute für verschiedene Bildschirme.

In der Entwicklung können Sie nur eine Reihe von Codes schreiben, die auf Mobiltelefonen, Tablets und PCs verwendet werden können, ohne die Verwendung von Medienabfragen in Betracht ziehen zu müssen ( (separat geschrieben für verschiedene Geräte) unterschiedliche Codes). (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Offizielle Erklärung von Bootstrap: Bootstrap bietet ein reaktionsfähiges, auf Mobilgeräte ausgerichtetes Fluid-Grid-System, Wie der Bildschirm bzw Wenn die Größe des Ansichtsfensters zunimmt, teilt das System es automatisch in 12 Spalten auf. Das Rastersystem wird verwendet, um Seitenlayouts durch eine Reihe von Zeilen und Spalten zu erstellen.

Verwenden Sie das reaktionsfähige Bootstrap-Layout.

Zuerst müssen Sie das Meta-Tag in den Kopf einfügen, das Viewpirt-Attribut und das Content-Attribut hinzufügen. Alles Inhaltsbreite Entspricht der Gerätebreite, Anfangsskalierung: die Zoomstufe des sichtbaren Bereichs, wenn die Seite zum ersten Mal angezeigt wird. Wenn der Wert 1 ist, wird die Seite entsprechend der tatsächlichen Größe ohne jegliche Skalierung angezeigt. das Mindestverhältnis, auf das der Benutzer zoomen darf; vom Benutzer skalierbar: ob der Benutzer manuell skalieren kann.

Der Code lautet wie folgt:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

Das Folgende ist eine Seite (Anmeldeformularschnittstelle) mit Bootstrap-Layout, die auf ultrakleine Mobiltelefonbildschirme (iphone5s) und PC-Bildschirme (> ;=1200px). col-xs-12: kleiner Bildschirm belegt 12 Spalten, col-lg-5: großer Bildschirm belegt 5 Spalten, col-lg-offset-3: großer Bildschirm rückt 3 Spalten ein.

Dies ist ein relativ einfaches Beispiel. Wenn Sie sich an andere Bildschirme wie Tablets anpassen möchten, können Sie col-md-*-Attribute hinzufügen, und bei Telefonen mit großem Bildschirm können Sie col-sm-* hinzufügen. Attribute.

<div class="container-fluid login">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
      <form class="form-horizontal loginForm">
        <h3 class="form-signin-heading">用户登录</h3>
        <div class="form-group">
          <label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label>
          <div class="col-sm-8 col-xs-8">
            <input type="text" class="form-control" name="email" placeholder="请输入邮箱">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 col-xs-3 control-label">密码</label>
          <div class="col-sm-8 col-xs-8">
            <input type="password" class="form-control" name="password" placeholder="请输入密码">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-4 col-xs-4 ">
            <div class="checkbox">
              <label>
                <input type="checkbox">记住我 </label>
            </div>
          </div>
          <div class="col-sm-4 col-xs-4 control-label" >
            <a href="resetPwd.html" id="forget">忘记密码？</a>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-12 col-lg-12">
            <button type="button" class="btn btn-primary btn-block" id="submit">登录</button>
          </div>
        </div>
      </form>
    </div>
  </div>

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr darüber zu erfahren!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Bootstrap-Responsive-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!