Comment créer une mise en page réactive au bootstrap

La mise en page réactive de Bootstrap utilise son système de grille et utilise différents attributs de classe pour différents écrans.

En développement, vous ne pouvez écrire qu'un ensemble de codes pouvant être utilisés sur les téléphones mobiles, les tablettes et les PC, sans avoir à envisager d'utiliser des requêtes multimédias ( écrit séparément pour différents appareils) différents codes). (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Explication officielle de Bootstrap : Bootstrap fournit un système de grille fluide réactif et axé sur les appareils mobiles, Comme l'écran ou La taille de la fenêtre d'affichage augmente, le système la divisera automatiquement en 12 colonnes. Le système de grille est utilisé pour créer des mises en page à travers une série de lignes et de colonnes.

Utilisez la mise en page réactive Bootstrap,

Vous devez d'abord introduire la balise méta dans l'en-tête, ajouter l'attribut viewpirt, l'attribut content, son largeur du contenu Égal à la largeur de l'appareil, échelle initiale : le niveau de zoom de la zone visible lors du premier affichage de la page. Si la valeur est 1, la page sera affichée selon la taille réelle sans aucune mise à l'échelle ; le rapport minimum sur lequel l'utilisateur est autorisé à zoomer ; évolutif par l'utilisateur : si l'utilisateur peut être mis à l'échelle manuellement.

Le code est le suivant :

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

Ce qui suit est une page (interface du formulaire de connexion) utilisant la disposition bootstrap, ciblant les écrans de téléphones mobiles ultra-petits (iphone5) et Écrans PC (> ;=1200px). col-xs-12 : le petit écran occupe 12 colonnes, col-lg-5 : le grand écran occupe 5 colonnes, col-lg-offset-3 : le grand écran met en retrait 3 colonnes.

Il s'agit d'un exemple relativement simple. Si vous souhaitez vous adapter à d'autres écrans tels que les tablettes, vous pouvez ajouter des attributs col-md-*, et les téléphones grand écran peuvent ajouter col-sm-*. attributs.

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

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!