So implementieren Sie ein Bootstrap-Responsive-Layout

Responsives Layout:

Responsives Design soll unterschiedliche Darstellungsmethoden zum Durchsuchen von Webseiten auf Endgeräten mit unterschiedlichen Bildschirmauflösungen erreichen. Responsive Design kann dazu beitragen, dass die Website auf Mobiltelefonen und Tablets ein besseres Surf- und Leseerlebnis bietet. Unterschiedliche Bildschirmgrößen zeigen Benutzern unterschiedliche Webseiteninhalte an. Mithilfe von Medienabfragen können wir die Größe des Bildschirms ermitteln (hauptsächlich die Breite ermitteln) und verschiedene CSS-Stile festlegen, um ein reaktionsfähiges Layout zu erzielen.

Wir verwenden ein responsives Layout, um Webinhalte auf Endgeräten unterschiedlicher Größe perfekt anzuzeigen, was die Benutzererfahrung erheblich verbessert. Um dieses Ziel zu erreichen, müssen wir jedoch viele Redundanzen für Medienabfragen verwenden Durch den zusätzlichen Code wird die gesamte Webseite größer, was bei der Anwendung auf Mobilgeräten zu ernsthaften Leistungsproblemen führt.

Responsives Layout wird häufig auf offiziellen Unternehmenswebsites, Blogs sowie Nachrichten- und Informationswebsites verwendet. Diese Websites konzentrieren sich hauptsächlich auf das Durchsuchen von Inhalten ohne komplexe Interaktionen.

Verwenden Sie das reaktionsfähige Bootstrap-Layout

Implementierungsmethode: Geben Sie das Webseitenlayout eines bestimmten Breitenbereichs an, indem Sie die Breite des Bildschirms abfragen.

Ultrakleiner Bildschirm (mobiles Gerät) mit 768 Pixeln.

Kleines Bildschirmgerät mit 768 Pixeln bis 992 Pixeln 200px 992 =< w <1200

Breitbildgeräte 1200px oder höher w>=1200

Zuerst müssen Sie das Meta-Tag im Kopf einfügen und das Viewpirt-Attribut „Breite“ hinzufügen im Inhalt 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 in der tatsächlichen Größe ohne maximale Skalierung angezeigt. das Mindestverhältnis, auf das der Benutzer zoomen darf; vom Benutzer skalierbar: ob der Benutzer manuell zoomen 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 (>=1200 Pixel) abzielt. 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 das Attribut col-md-* hinzufügen, und für Telefone mit großem Bildschirm können Sie das Attribut col-sm-* hinzufügen.

<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>

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