Home > Web Front-end > Bootstrap Tutorial > How to make bootstrap responsive layout

How to make bootstrap responsive layout

(*-*)浩
Release: 2019-07-18 09:05:30
Original
6660 people have browsed it

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

How to make bootstrap responsive layout

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">
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template