How to make bootstrap responsive layout

Bootstrap's responsive layout uses its grid system and uses different class attributes for different screens.

In development, you can only write a set of codes that can be used on mobile phones, tablets, and PCs, without considering the use of media queries (written separately for different devices) different codes). (Recommended learning: Bootstrap video tutorial)

Official explanation of Bootstrap: Bootstrap provides a responsive, mobile device-first fluid grid system, As the screen or viewport size increases, the system will automatically divide it into 12 columns. The grid system is used to create page layouts through a series of rows and columns.

Using Bootstrap responsive layout,

First you need to introduce the meta tag in the head, add the viewpirt attribute, content attribute, its content width Equal to the device width, initial-scale: the zoom level of the visible area when the page is first displayed. If the value is 1, the page will be displayed according to the actual size without any scaling; maximum-scale: the minimum ratio that the user is allowed to zoom to; user-scalable: whether the user can Can be scaled manually.

The code is as follows:

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

The following is a page using bootstrap layout (login form interface), targeting ultra-small mobile phone screens (iphone5s) and PC screens (> ;=1200px). col-xs-12: small screen occupies 12 columns, col-lg-5: large screen occupies 5 columns, col-lg-offset-3: large screen indents 3 columns.

This is a relatively simple example. If you want to adapt to other screens such as tablets, you can add the col-md-* attribute, and for large-screen phones, you can add the col-sm-* 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>

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How to make bootstrap responsive layout. For more information, please follow other related articles on the PHP Chinese website!