JavaWeb——BootStrap

I personally feel that after mastering the basic knowledge, you can directly refer to the official document BootStrap official website for the implementation of some simple modules.

---

---

One, BootStrap brief introduction

• BootStrap, a front-end framework based on HTML, CSS, and JavaScript;

• The framework has pre-defined a set of CSS styles and the corresponding JS code; developers only need to write HTML structure, add BootStrap fixed class style, and then complete the specified effect;

• Function :
  BootStrap makes Web development faster and more efficient;
  BootStrap supports responsive development and solves the problem of mobile Internet front-end development;

• Responsive layout : the display of a website can be compatible with multiple terminals, without the need to make a separate display version for each terminal;

Two, BootStrap environment construction

1. Basic template creation

2. Basic template explanation

Three, layout container

• BootStrap must require at least one layout container to encapsulate and facilitate style control for page content, which is equivalent to a drawing board;
• Any element that uses the style of the layout container will become a layout container. It is recommended to use div as the layout container;
• container: Centered, with white space at both ends;
• container-fluid: Occupies 100% of the viewport width;

Four, grid system (grid system)

1. Brief description of grid system

• In order to facilitate web page layout operations in the layout container;
• BootStrap provides a grid system dedicated to responsive development layout;
• The grid system divides a row into 12 columns , and lays out the position of the element on the page by setting the number of columns occupied by the element;

2. Getting started with the grid system

(1) Grid features:

• The basic notation : 容器 --- 行 --- 列;
  (HTML 定义表格 --- 行 --- 单元格form: )
• OK : it must be included in .containeror .container-fluidin;
• Style line used .row, the column style used col-*-*, the content of the element should be placed in a column;
• Raster parameters:col-屏幕尺寸-占用列数
• The writing order of the column elements determines the layout order, and the column elements that are freely written will be laid out on the row first;
• The number of columns occupied by the column element, which defines the size of the element;
  

3. Grid system characteristics and in-depth analysis

• If the total number of columns occupied by column elements <= 12, these elements are still arranged in the same row;
• If the total number of columns occupied by the column elements> 12, the excess elements will be arranged in a new row;
• Rows and columns can be nested infinitely, the nesting method is: row-column-row-column...
  

4. Screen size setting

If the style of the current screen size is not set, one element occupies one line by default;

multiple screen sizes are set together

• If a screen size is set, the screen
  larger than this size inherits the current setting;
  the screen smaller than this size still occupies one line by default;
• For example: if col-md-4 is set, it is equivalent to setting col-lg-4, and
  other screen sizes default to col-sm-12 and col-xs-12;

5. Column offset

• Column offset: move the corresponding column element to the right;
• Example col-md-offset-4:; shift the element to the right by 4 columns;
  

Five, list

• .list-inline: Inline list;
  

Six, buttons

• Note : Any HTML element with the following styles will become a button;
  
  examples are as follows:
  

Seven, navigation bar

Eight, carousel diagram

• The attribute of timing change of the carousel DIV: data-interval="毫秒值"；
• Note : FIG plurality of rotation must be modified carousel Figure ID;
  after completing modifications FIG carousel ID, to modify the dots and the left and right buttons ID of;

Nine, typesetting alignment

• The following layout alignment will set the layout of all content within the element ;
  
  set the element centering effect:
  

Ten, form elements

• Horizontally arranged form style;
• Check status;
  

11. Paging bar