bootstrap is a practical framework that we first came into contact with in front-end learning. As long as we master HTML, css, JavaScript and other contents, we can skillfully use this framework. Let's take a brief look at the content of this framework. (attach the official address of the Chinese website)
Official address of Chinese website: bootstrap Chinese network
1, bootstrap framework
1. It is a front-end frame.
2. It encapsulates HTML, CSS and JavaScript.
3. It has the effect of responsive layout (it can adapt to devices with different screen sizes).
4. Build an elegant and beautiful front-end interface and occupy less resources.
2, bootstrap configuration
1. Use local files
(1)bootstrap.css (bootstrap.min.css): css style required
(2)bootstrap.js (bootstrap.min.js): a required JS file
(3)jQuery.js (jquery.min.js): if you want to use it, it must be placed in bootstrap.js according to the requirements of the actual situation JS file
2. Use CDN acceleration service (must be connected to the Internet)
<!-- Bootstrap core CSS file --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- Optional Bootstrap topic file --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> <!-- abreast of the times Bootstrap core JavaScript file --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
3, Global css style of bootstrap
1. Disable the zoom function on the mobile device:
<meta user-scalable=no />
2. Container
(1). container: class is used for containers with fixed width and supporting responsive layout
<div class="container"></div>
(2). Container fluid: used for containers with 100% width and occupying all view ports
<div class="container-fluid" style="background-color: brown; height: 500px;"></div>
Note: these two containers cannot be nested with each other
3. Typesetting:
(1) Title labels: h1 ~ h6 all have corresponding class attributes: h1~.h6
(2) page body: font size: 14px
(3) form:
. Table: basic style of table
. Table striped: table interlaced color change
. Table bordered: table border
. Table hover: mouse hover effect (respond to mouse hover)
. Table condensed: compact table (compact style of table)
Status class style: sets the style of cells or rows
. active the color set when the mouse hovers over a row or cell
. info identifies common prompt information
. success identifies a positive or successful action
. Warning flag warning
. danger identification
(4) form:
. Form group: it can arrange form controls in a good position
. From control: the width of input, textarea and select using this style can be 100%
(5) button:
A. button style
<button type="button" class="btn btn-primary" disabled>university</button> <button type="button" class="btn btn-info">university</button> <button type="button" class="btn btn-danger">university</button> <button type="button" class="btn btn-warning">university</button> <button type="button" class="btn btn-success">university</button> <input type="button" class="btn btn-success" value="university"> <button type="button" class="btn btn-default">Years later</button>
B. button size
. BTN LG: large button
. BTN SM: small button
. BTN XS: ultra small button
. BTN block: parent container width percentage
(6) picture style:
Fillet image: <img src="..." alt="..." class="img-rounded"> Circular picture: <img src="..." alt="..." class="img-circle"> Border fillet: <img src="..." alt="..." class="img-thumbnail">
. IMG responsive: responsive picture
. Center block: center the picture
(7) auxiliary class:
A. text color
<p class="text-success">Front end frame</p> <p class="text-primary">Front end frame</p> <p class="text-warning">Front end frame</p> <p class="text-info">Front end frame</p> <p class="text-danger">Front end frame</p>
B. background color
<p class="text-success bg-success">Front end frame</p> <p class="text-primary">Front end frame</p> <p class="text-warning">Front end frame</p> <p class="text-info">Front end frame</p> <p class="text-danger">Front end frame</p>
C. triangle symbol
<span class="caret"></span>
D. clear floating
<div class="clearfix"></div>
E. show and hide content
Hidden content: <div class="hidden">Hello world</div>
4, bootstrap grid system (important):
It is a responsive, mobile device first streaming grid system. Divide the screen or viewport into up to 12 columns, create a page layout through a series of row and column combinations, and put the content in the columns
1. The row must be placed in the container (. Container or. Container fluid); In this way, there will be appropriate arrangement and internal White filling
2. Each row can be divided into several columns (col), which can only be used as the direct child element of the row
3. Columns in the grid system represent the range they span by specifying values from 1 to 12
4. If a row contains more than 12 columns, the elements of the redundant columns will be treated as a whole and arranged in another row.
5. Grid parameters:
. Col XS ultra small screen (mobile phone)
. Col SM small screen (flat panel)
. Col MD medium screen (desktop display)
. Col LG large screen (large desktop display)
6. Column offset
. Col MD offset - *: this class can offset the column to the right
7. Delete grid spacing:
.row-no-gutters
8. Container fluid: the grid width is 100%
9. Display of grid system:
<div class="row bg-success row-no-gutters"> <div class="col-md-2">world</div> <div class="col-md-2">Years later</div> <div class="col-md-2">Hello</div> <div class="col-md-2">very good</div> <div class="col-md-2">not bad</div> <div class="col-md-2">Very good</div> </div>
Display effect:
