Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use bootstrap". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use bootstrap" can help you solve the problem.

Responsive development

Principle of responsive development

Use media queries to set layouts and styles for devices of different widths to suit the purpose of different devices

Equipment size range ultra-small screen (mobile phone) = 768px~=992px~=1200px

Responsive layout container

Ultra-small screen (mobile phone / less than 768px): set width to 100%

Small screen (flat panel, 768px or greater): set width to 750px

Medium screen (desktop displays it, greater than or equal to 992px): width set to 970px

Large screen (desktop display, 1200px or greater): width set to 1170px

Responsive requires a parent as a layout container to cooperate with child elements to achieve the effect of change.

[principle] under different screens, change the size of the layout container through media query, and change the arrangement and size of the inner sub-elements, so as to see different page layouts and styles under different screens.

Responsive size division

Introduction to Bootstrap

Standardized html+css coding specification

Provide a set of simple, intuitive, and robust components

Have their own biosphere, constantly update iterations

Make development easier and improve development efficiency

Bootstrap, from Twitter, is by far the most popular front-end framework. Bootstrap is based on HTML, CSS and JAVASCRIPT, and its introduction is flexible, which makes Web development faster.

Bootstrap usage

Create a folder structure

Create a html skeleton structure

Bootstrap 101Template Hello, World!

Introduce related style files

Writing content

Bootstrap layout container

Percentage width of streaming layout container

Containers that occupy all viewports (vieport)

It is suitable for mobile development alone.

Fixed width of container in responsive layout

Large screen (> = 1200px) width positioning 1170px

Middle screen (> = 992px) width positioning 970px

Small screen (> = 768px) width positioning 750px

Ultra-small screen (100%)

Bootstrap needs to wrap a .container container, Bootstrap predefined class, for the page content and the grid system

.container class

. contaimer-fluidlei

Brief introduction of Grid system

Grid system is "grid systems" in English, and it is also translated as "grid system". It refers to dividing the page layout into equal width columns, and then modularizing the page layout by defining the number of columns.

Bootstrap provides a responsive / mobile device priority streaming grid system that automatically divides into up to 12 columns as the screen or viewport size increases.

The width of container in Bootstrap is fixed, but the width of container is different under different screens, so we divide container into 12 equal parts.

Rasterization option parameter

The row must be placed in the container layout container

To achieve the average partition of a column, you need to add a class prefix to the column.

Xs-extra small: ultra-small; sm-small: small; md-medium: medium; lg-large: large

The column is greater than 12, and the elements where the extra "column" is located will be arranged in a separate row as a whole.

Each column has a default padding of about 15 pixels.

You can set thunder for multiple devices for a column at the same time to divide different scores, such as class= "col-md-4 col-sm-6"

The rasterization system is used to create page layouts through a series of combinations of rows (row) and columns (column), and the page content can be placed into these created layouts.

Ultra-small screen (mobile phone) = 768px medium screen (desktop monitor) > = 992px widescreen device (large desktop monitor) > = 1200px.container maximum width automatic (100%) 750px970px1170px class prefix. Col-xs-.col-sm-.col-md-.col-lg- column (column)

Grid column nesting

The grid system built into the grid system nests the content again. The simple understanding is that a column is subdivided into several small columns. You can add a new .row element and a series of .col-sm-* elements to an existing .col-sm-* element

It is best to add a row for column nesting so that the padding value of the parent element can be removed and it is as high as the parent automatically.

An a

Grid column offset

Use the .col-md-offset-* class to offset the column to the right. These classes actually increase the left margin of the current element by using the * selector

Grid column sorting

The order of columns (column) can be easily changed by using the .col-md-push-* and .col-md-pull-* classes.

Responsive tool

In order to speed up the development of mobile device-friendly pages, make use of media query functions, and use these tools to easily display or hide page content for different devices

Class name ultra-small screen small screen big screen. Hidden-xs hidden visible. Hidden-sm visible hidden visible visible. Hidden-md visible hidden visible. Hidden-lg visible hidden hidden about "how to use bootstrap" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.