search
HomeWeb Front-endBootstrap TutorialWhat is the principle of bootstrap to implement responsive layout?

In bootstrap, the responsive layout is implemented by using the grid system to use different class attributes for different screens. The system will automatically be divided into 12 columns. The responsive layout uses the grid system to pass a series of rows and A combination of columns to create a page layout.

What is the principle of bootstrap to implement responsive layout?

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

What is the principle of bootstrap to implement responsive layout

The implementation principle of the grid system is to define the size of the container, divide it into 12 equal parts (it can also be divided into 24 or 32 parts, but 12 parts is the most common), then adjust the inner and outer margins, and finally combine it with media queries , a powerful responsive grid system was created.

The implementation principle of the grid system is to define the container size and divide it into 12 equal parts (it can also be divided into 24 or 32 parts, but 12 parts is the most common ), then adjust the inner and outer margins, and finally combine it with media queries to create a powerful responsive grid system. The grid system in the Bootstrap framework divides the container into 12 equal parts.

bootstrap advantages and disadvantages:

1.bootstrap recently released bootstrap4, which has box-flex layout and other updates, keeping up with the development of the latest web technology

2. Relatively mature, fully used and tested in a large number of projects

3. With complete documentation, it is more convenient to use

4. There are a large number of component styles, accepted Customization

Disadvantages:

1. If you have your own special needs, you need to re-customize the style. If there are a large number of non-bootstrap "style" styles in a website exists, then you need to do a lot of css rewriting, so the meaning of using the framework is lost.

2. There will be compatibility issues. Although there are many ways to be compatible with IE on the Internet, other files need to be introduced, some of which are quite small, which will inevitably cause the loading speed to slow down and affect the user experience.

Bootstrap's responsive layout uses its grid system and uses different class attributes for different screens. During development, you can only write one set of code that can be used on mobile phones, tablets, and PCs, without having to consider using media queries (writing different codes for different devices). Bootstrap's official explanation: Bootstrap provides a responsive, mobile-first fluid grid system. As the screen or viewport size increases, the system will automatically be divided into 12 columns. The grid system is used to create page layouts through a series of rows and columns.

How the grid system works:

1. Rows must be contained in .container (fixed width) or .container-fluid (100% width) in order to give it proper alignment (alignment
) and padding.
2. Create a group of columns in the horizontal direction through rows.
3. Your content should be placed in the column (column), and only the column can be used as a direct child element of the row (row).
4. Predefined classes like .row and .col-xs-4 can be used to quickly create grid layouts. Mixins defined in the Bootstrap source code can also be used to create semantic layouts.
5. Create a gap (gutter) between columns by setting the padding attribute for the column. By setting a negative margin for the .row element to offset the padding set for the .container element, the padding is indirectly offset for the columns contained in the row.
6. The columns of the grid system represent the span range by specifying a value from 1 to 12. For example, three equal-width columns can be created using three .col-xs-4.
7. If the number of columns contained in a row (row) is greater than 12, the elements of the extra columns will be arranged as a whole in another row.
8. The grid class is suitable for devices with a screen width greater than or equal to the dividing point size, and the grid class is overridden for small screens.
The following figure shows the application instructions of the grid system on various screens.

Using Bootstrap responsive layout,

First, you need to introduce the meta tag in the head, add the viewpirt attribute, the width in the content is equal to the device width, initial-scale: the page is visible for the first time. The zoom level of the area. 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 manually zoom. 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 (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. Which attribute to use for a specific screen can refer to the different uses of the Bootstrap grid system for different screens in the picture above.

<p class="container-fluid login">
  <p class="row">
    <p class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
      <form class="form-horizontal loginForm">
        <h3 id="用户登录">用户登录</h3>
        <p class="form-group">
          <label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label>
          <p 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>
            </p>
        </p>
        <p class="form-group">
          <label for="password" class="col-sm-2 col-xs-3 control-label">密码</label>
          <p 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>
            </p>
        </p>
        <p class="form-group">
          <p class="col-sm-offset-2 col-sm-4 col-xs-4 ">
            <p class="checkbox">
              <label>
                <input type="checkbox">记住我 </label>
            </p>
          </p>
          <p class="col-sm-4 col-xs-4 control-label" >
            <a href="resetPwd.html" id="forget">忘记密码?</a>
          </p>
        </p>
        <p class="form-group">
          <p class="col-sm-12 col-lg-12">
            <button type="button" class="btn btn-primary btn-block" id="submit">登录</button>
          </p>
        </p>
      </form>
    </p>
  </p>

Code renderings:
PC version:

Mobile version:

Related recommendations: bootstrap tutorial

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

Statement
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
Integrating Bootstrap into React: A Practical GuideIntegrating Bootstrap into React: A Practical GuideApr 25, 2025 am 12:04 AM

The steps to integrate Bootstrap into a React project include: 1. Install the Bootstrap package, 2. Import the CSS file, 3. Use Bootstrap class name to style elements, 4. Use React-Bootstrap or reactstrap library to use Bootstrap's JavaScript components. This integration utilizes React's componentization and Bootstrap's style system to achieve efficient UI development.

What is Bootstrap Used For? A Practical ExplanationWhat is Bootstrap Used For? A Practical ExplanationApr 24, 2025 am 12:16 AM

Bootstrapisapowerfulframeworkthatsimplifiescreatingresponsive,mobile-firstwebsites.Itoffers:1)agridsystemforadaptablelayouts,2)pre-styledelementslikebuttonsandforms,and3)JavaScriptcomponentssuchascarouselsforenhancedinteractivity.

Bootstrap: From Layouts to ComponentsBootstrap: From Layouts to ComponentsApr 23, 2025 am 12:06 AM

Bootstrap is a front-end framework developed by Twitter that integrates HTML, CSS and JavaScript to help developers quickly build responsive websites. Its core functions include: Grid system and layout: based on 12-column design, using flexbox layout, and supporting responsive pages of different device sizes. Components and styles: Provide a rich library of component, such as buttons, modal boxes, etc., and you can achieve beautiful effects by adding class names. How it works: Rely on CSS and JavaScript, CSS uses LESS or SASS preprocessors, and JavaScript relies on jQuery to achieve interactive and dynamic effects. Through these features, Bootstrap greatly improves development

What is Bootstrap? An Introduction for BeginnersWhat is Bootstrap? An Introduction for BeginnersApr 22, 2025 am 12:07 AM

BootstrapisafreeCSSframeworkthatsimplifieswebdevelopmentbyprovidingpre-styledcomponentsandJavaScriptplugins.It'sidealforcreatingresponsive,mobile-firstwebsites,offeringaflexiblegridsystemforlayoutsandasupportivecommunityforlearningandcustomization.

Bootstrap Demystified: A Simple ExplanationBootstrap Demystified: A Simple ExplanationApr 21, 2025 am 12:13 AM

Bootstrapisafree,open-sourceCSSframeworkthathelpscreateresponsive,mobile-firstwebsites.1)Itoffersagridsystemforlayoutflexibility,2)includespre-styledcomponentsforquickdesign,and3)ishighlycustomizabletoavoidgenericlooks,butrequiresunderstandingCSStoop

Bootstrap vs. React: Choosing the Right ApproachBootstrap vs. React: Choosing the Right ApproachApr 20, 2025 am 12:09 AM

Bootstrap is suitable for quick construction and small projects, while React is suitable for complex and interactive applications. 1) Bootstrap provides predefined CSS and JavaScript components to simplify responsive interface development. 2) React improves performance and interactivity through component development and virtual DOM.

Bootstrap's Purpose: Building Consistent and Attractive WebsitesBootstrap's Purpose: Building Consistent and Attractive WebsitesApr 19, 2025 am 12:07 AM

The main purpose of Bootstrap is to help developers quickly build responsive, mobile-first websites. Its core functions include: 1. Responsive design, which realizes layout adjustments of different devices through a grid system; 2. Predefined components, such as navigation bars and modal boxes, ensure aesthetics and cross-browser compatibility; 3. Support customization and extensions, and use Sass variables and mixins to adjust styles.

Bootstrap vs. Other Frameworks: A Comparative OverviewBootstrap vs. Other Frameworks: A Comparative OverviewApr 18, 2025 am 12:06 AM

Bootstrap is better than TailwindCSS, Foundation, and Bulma because it is easy to use and quickly develop responsive websites. 1.Bootstrap provides a rich library of predefined styles and components. 2. Its CSS and JavaScript libraries support responsive design and interactive functions. 3. Suitable for rapid development, but custom styles may be more complicated.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment