Comment implémenter une mise en page réactive au bootstrap

Mise en page réactive :

La conception réactive est destinée à obtenir différentes méthodes d'affichage pour parcourir les pages Web sur des terminaux avec différentes résolutions d'écran. La conception réactive peut permettre au site Web d'offrir une meilleure expérience de navigation et de lecture sur les téléphones mobiles et les tablettes. Différentes tailles d'écran affichent différents contenus de page Web pour les utilisateurs. Nous pouvons utiliser des requêtes multimédias pour détecter la taille de l'écran (principalement en détectant la largeur) et définir différents styles CSS pour obtenir une mise en page réactive.

Nous utilisons une mise en page réactive pour afficher parfaitement le contenu Web sur des terminaux de différentes tailles, ce qui améliore considérablement l'expérience utilisateur. Cependant, pour atteindre cet objectif, nous devons utiliser des requêtes multimédias pour écrire beaucoup de redondances. Le code supplémentaire augmentera la taille de la page Web globale, ce qui entraînera de graves problèmes de performances lorsqu'il sera appliqué sur des appareils mobiles.

La mise en page adaptative est souvent utilisée dans les sites Web officiels d'entreprise, les blogs et les sites Web d'informations d'actualité. Ces sites Web se concentrent principalement sur la navigation de contenu sans interactions complexes.

Utiliser la mise en page réactive Bootstrap

Méthode de mise en œuvre : Spécifiez la mise en page de la page Web d'une certaine plage de largeur en interrogeant la largeur de l'écran.

Ultra petit écran (appareil mobile) avec<768px

Appareil petit écran 768px-992px 768 <= w <992

Écran moyen 992px-1 200px 992 =< w <1200

Appareils grand écran 1200px ou supérieur w>=1200

Tout d'abord, vous devez introduire la balise méta dans la tête et ajouter l'attribut viewpirt La largeur. dans le contenu est é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 à 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 zoomer 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 (iphone5s) et les écrans de 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 des attributs col-sm-*.

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

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!