How to implement bootstrap responsive layout

Responsive layout:

Responsive design is intended to achieve different display methods for browsing web pages on terminals with different screen resolutions. Responsive design can make the website have a better browsing and reading experience on mobile phones and tablets. Different screen sizes display different web page content to users. We can use media queries to detect the size of the screen (mainly detecting width) and set different CSS styles to achieve responsive layout.

We use responsive layout to perfectly display web content on terminal devices of different sizes, which greatly improves the user experience. However, in order to achieve this goal, we have to use media queries to write a lot of redundant information. The extra code will increase the size of the overall web page, which will cause serious performance problems when applied on mobile devices.

Responsive layout is often used in corporate official websites, blogs, and news information websites. These websites mainly focus on browsing content without complex interactions.

Use Bootstrap responsive layout

Implementation method: Specify the web page layout of a certain width range by querying the width of the screen.

Ultra small screen (mobile device) w<768px

Small screen device 768px-992px 768 <= w <992

Medium screen 992px-1200px 992 =

<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 (login form interface) using bootstrap layout, 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>

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