This is the 12th day of my participation in the First Challenge 2022

Bootstrap Getting started notes

Bootstrap is a Web front-end development framework that provides a user-friendly, cross-browser solution for most standard UI design scenarios. Its readily available and community-proven combination of HTML tags, CSS styles, and JavaScript behavior dramatically improves the efficiency of Web front-end interface development and creates pleasant results. Bootstrap sets the global CSS styles. Basic elements of HTML can be styled and enhanced with class. And, of course, a responsive grid system!

A simplified version of the tutorial (for beginners)

Use 1.

Import: Introduce a CSS file written by someone else at the beginning of an HTML file

<! Bootstrap core CSS file of the latest version
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Copy the code

Use: yourself only as neededThe label elementthereSets a specific class propertyWill do. For example, if you add a class attribute to a button, you can change the way it looks.~~(If you have hands)~~

    <button> normal button</button>
    <button class="btn btn-default">default button</button>
    <button class="btn btn-primary">primary button</button>
    <button class="btn btn-info">info button</button>
    <button class="btn btn-danger">danger button</button>
    <button class="btn btn-success">info button</button>
    <button class="btn btn-warning">warning button</button>
Copy the code

2. The name of the class

So how do you know which class name to change to class?

The form can be found at v3.bootcss.com/css/#tables

Button reference website: v3.bootcss.com/css/#button…

Keep looking for the rest and you’ll find it

3. Layout (grid system)

The core of Bootstrap is also a highlight of its responsive layout. Be able to type your own stuff left and right on the page.

Simple usage instructions (normal PC) : class= row nested class= col-mD-number.

Please refer to v3.bootcss.com/css/#grid-e…

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .col-md-1{
            background-color: black;
        }
        .col-md-2{
            background-color: blue;
        }
        .col-md-3{
            background-color:yellow;
        }
        .col-md-4{
            background-color: red;
        }
        
    </style>
</head>
<body>
    <div class="row">
        <div class="col-md-1">col-md-1</div>       
        <div class="col-md-2">col-md-2</div>       
        <div class="col-md-3">col-md-3</div>       
        <div class="col-md-4">col-md-4</div>       
    </div>
</body>
</html>
Copy the code

The number in the class name represents how many columns are occupied, and there are 12 columns in a row by default.

The MD is available for medium screen devices.

Classes defined for ultra-small screen devices, i.e..col-xs-*

The.col-sm-* class for tablet devices

There is also a category name representing offset: v3.bootcss.com/css/#grid-o…

Two. Detailed version of the tutorial

1. Environment construction

Download the precompiled and compressed bootstrap locally and import it into the project.
Import directly from CDN

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<! - or - >
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<! -- The last two can be put after -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
Copy the code

<! DOCTYPEhtml>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <! The above 3 meta tags must come first, and everything else must come after them! -->
    <title>Bootstrap HelloWorld</title>

    <! -- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello world!</h1>

    <! -- jQuery (all JavaScript plug-ins for Bootstrap rely on jQuery and must be placed first) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <! Load all JavaScript plugins for Bootstrap. You can also load individual plug-ins as needed. -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Copy the code

2. Basic template

Don’t think the code below is the same as the one above, it’s actually a little different. If the CSS style used does not depend on the JS plug-in, it is not necessary to introduce jQuery JS files.

<! doctypehtml>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <! The above 3 meta tags must come first, and everything else must come after them! -->
    <title>Bootstrap 101 Template</title>

    <! -- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <! HTML5 shim and responder.js are designed to allow IE8 to support HTML5 elements and media queries -->
    <! -- warning: responder.js does not work when accessing a page using the file:// protocol (that is, dragging and dropping HTML pages directly into the browser) -->
    <! -- [if lt IE 9] > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js" > < / script > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js" > < / script > <! [endif]-->
  </head>
  <body>
    <h1>Hello world!</h1>

    <! -- jQuery (all JavaScript plug-ins for Bootstrap rely on jQuery and must be placed first) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <! Load all JavaScript plugins for Bootstrap. You can also load individual plug-ins as needed. -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>
Copy the code

3. Responsive layout

The same set of pages can be compatible with devices of different resolutions

Implementation: Depends on the grid system. As the screen size increases, the system automatically divides into up to 12 columns.

Grid system use method: to put it bluntly is to use a defined class (class)

The container

Equivalent to table before.

The container class is used for fixed-width containers that support responsive layout, with white space on both sides.

The Container-Fluid class is used for containers that are 100% width and occupy all viewports.

(These two container classes cannot be nested with each other)

line

That’s what TR was before.

“Row” must be included in the.container(Fixed width) or.container-fluid(100% width) in order to give it proper aligment and padding.
Row creates a set of columns horizontally.

column

Specifies the number of cells that this element occupies on different devices.

Format: COL – Equipment code – cell number

Equipment Code:

Xs: Ultra-small screen, mobile phone (<768px)

Sm: Small screen tablet (≥768px)

Md: Medium screen desktop monitor (≥992px)

Lg: Large screen large desktop monitor (≥1200px)

Your content should be placed inside a column, and only a column can be a direct child of a row.
similar.row 和 .col-xs-4This predefined class can be used to quickly create raster layouts. Mixins defined in the Bootstrap source code can also be used to create semantic layouts.
By setting for columnpaddingProperty to create a gutter between columns. By providing.rowElement setting negative valuemarginAnd that cancels out with theta.containerElement setpadding“, which indirectly cancels out the column contained in “row”padding.

Pay attention to

If there are more than 12 cells in a row, the excess part is wrapped.

Raster properties are compatible upward. Properties defined for the small screen apply to the large screen.

If the device width is less than the minimum width set by the raster class element attribute, an element will fill a row.

case

<! DOCTYPEhtml>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
   
div.container div.row div {
    margin:5px 0px;
}
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 ">A total of 12 columns</div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">Of four columns</div>
        <div class="col-xs-4 ">Of four columns</div>
        <div class="col-xs-4 ">Of four columns</div>
    </div>
</div>
Copy the code

The column offset

Columns can be offset to the right using the.col-md-offset-* class. These classes actually add a margin to the left of the current element by using the * selector. For example, the.col-md-offset-4 class offsets the.col-md-4 element by four columns to the right.

Nested columns

To nest content again using the built-in raster system, you can add a new.row element and a series of.col-sm-* elements to existing.col-sm-* elements. A nested row can contain no more than 12 columns (there is no requirement that you fill all 12 columns).

Column sorting

You can easily change the order of columns by using the.col-md-push-* and.col-md-pull-* classes.

Let’s make a simple distinction, where push and offset are similar.

Col-md-offset-3 (add 3 columns on left) Col-MD-push-8 (push 8 columns from left to right) col-Md-pull-2 (pull 2 columns to left)

Semantic layout of Less mixin and variables

In addition to the predefined raster classes for fast layout, Bootstrap also includes a set of Less variables and mixins to help you generate simple, semantic layouts.

variable

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;
Copy the code

mixin

Example:

.wrapper {
  .make-row(a); }.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
Copy the code

Style of 4.

Global CSS Styles

Button:
- <button type="button" class=" BTN btn-default">
- <button type="button" class=" BTN btn-primary"> </button>
- <button type="button" class=" BTN btn-success">
- <button type="button" class=" BTN btn-info"> </button>
- Class =" BTN bTN-warning "Warning button
- Class =" BTN bTN-danger "Danger button
- class="btn btn-link"Link button

Kind of style	describe
.btn	Rounded grey button. To make the button less sharp, all of our buttons should use this style to get rounded corners and then overlay other features.
.btn-default	Default/standard button, white press gray.
.btn-primary	Raw button style (not acted on), this corresponds to active, which is the style of the button that is not acted on, and active, which is the style that appears when the button is clicked.
.btn-success	A successful action
.btn-info	This style can be used for buttons that want to pop up information
.btn-warning	Indicates a button that needs to be operated with caution
.btn-danger	Button action representing a dangerous action
.btn-link	Make the button look like a link (still preserving the button behavior)
.btn-lg	Large buttons
.btn-sm	Small button
.btn-xs	Super small button
.btn-block	Block-level buttons (stretch to 100% width of parent element)
.active	The button is clicked, and when activated it appears as it was pressed (dark background, dark border, shadows).
.disabled	Disable the button and the color will fade by 50% and the gradient will be lost.

The picture

Specify class=img-responsive in div so that the image supports responsive layout // image shape<img src="xxx" alt="xxx" class="img-rounded">/ / square<img src="xxx" alt="xxx" class="img-circle">/ / round<img src="xxx" alt="xxx" class="img-thunbnail">/ / picture frameCopy the code

form

  <body>
   <table class="table table-hover">
       <tr>
           <th>The column 1</th>
           <th>Column 2</th>
       </tr>
        <tr>
           <td>The column value 1</td>
           <td>The column value 2</td>
       </tr>
    </table>
  </body>//class="table table-striped": table with stripes //class="table table-bordered": table with stripes //class="table Tab-condensed: Compact table (the padding in each cell will be halved) // Reactive table (add a slider when the screen is small)<div class="table-responsive">
  <table class="table">.</table>
</div>
Copy the code

Status class, set in “tr” or “TD”.

Class	describe
`.active`	Color set when the mouse hovers over a row or cell
`.success`	Identifies successful or positive actions
`.info`	Indicates a common prompt or action
`.warning`	Identifies a warning or requires user attention
`.danger`	Identify dangerous or potentially negative actions

The form
Add class=”from-control” to form entry
abbreviations

Bootstrap enhances HTML’s < ABBR > elements to display the full content when hovering over abbreviations and abbreviations. The acronym element has the title attribute and appears as a shallow dotted box that becomes a pointer with a “question mark” when you hover over it. To see the full content, hover over the acronym (also visible to assistive technology users), but you need to include the title attribute.

Add the.initialism class for abbreviations to make font size slightly smaller.

Example: The word title appears when you hover over it

<abbr title="attribute" class="initialism">attr</abbr>
Copy the code

reference

The < blockQuote > tag is used to quote numerous quotes in paragraphs.

Article inline

You can put all elements on the same line display: inline-block; or

<ul class="list-inline">
  <li>.</li>
</ul>
Copy the code

component

The navigation bar
- Defined using the nav element,<nav class="navbar navbar-default"></nav>
- Defines the navigation bar Settings for inverting colorsclass="navbar navbar-inverse"
- Only support<button>Element, does not support <a>
Article page

Js plug-in

Shuffling: a Carousel
You can choose the title, speed, and direction of rotation

5. Special features

Navigation bar with drop-down function

Inverted triangle: caret + Dropdown menu: dropdown menu

<! -- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">.</ul>
</div>
Copy the code

(Adding the.dropup class to the parent makes the triggered drop-down menu open up.)

6. Summary

They don’t just check official documents
Be careful not to overwrite your own styles when importing

Iii. Refer to the website

Bootstrap: www.bootcss.com/

Nuggets quick start article: juejin.cn/post/692239…

Other CSS libraries are recommended

Spectre.css

Spectre.css is a lightweight, responsive modern CSS framework for faster, more scalable development capabilities. Spectre provides a variety of basic styles for typography and elements, based on Flexbox’s responsive layout mechanism, plus pure CSS components and tools.

Gitee website: gitee.com/mirrors/Spe…

Usage: Similar to Bootstrap, add a specific class name, but the size is smaller than that of Bootstrap.

fontawesome

An excellent font and CSS style library

Liverpoolfc.tv: fontawesome.dashgame.com/

Usage: The class name is the style. But the styles inside are different from the classic bootstrap styles.

ElementUI

Can be called Vue framework supporting CSS library.

Official website (quick start) : element.eleme.cn/#/zh-CN/com…

Usage: Use specific “HTML tags”, such as

,

, etc. (Of course, mainly with the JS part of the VUE to use control data, such as paging components, card components, excellent results.)

Bootstrap Getting started notes

Bootstrap Getting started notes

A simplified version of the tutorial (for beginners)

Use 1.

2. The name of the class

3. Layout (grid system)

Two. Detailed version of the tutorial

1. Environment construction

2. Basic template

3. Responsive layout

The container

line

column

Pay attention to

The column offset

Nested columns

Column sorting

Semantic layout of Less mixin and variables

variable

mixin

Style of 4.

Global CSS Styles

component

Js plug-in

5. Special features

Navigation bar with drop-down function

6. Summary

Iii. Refer to the website

Other CSS libraries are recommended

Spectre.css

fontawesome

ElementUI

Related Posts

Element Table title bar custom style

Learn to use JavaScript to access and modify CSS styles

50 JS must understand interview topics you help gold nine silver ten