Front-end framework Bootstrap

The framework has already written many page styles for us. If you need to use it, you only need to download the corresponding file.

Just copy the CV directly

When using Bootstrap, all page styles only need to be adjusted by modifying the class attribute.

What is Bootstrap

Bootstrap is an open source front-end framework for quickly building responsive and mobile-first websites or applications.
- It contains templates and toolsets for HTML, CSS, and JavaScript, allowing developers to quickly create page layouts and UI components with a consistent and modern look.
Bootstrap was originally created by some engineers at Twitter to simplify the process of web development.
- It provides an extensive library of predefined styles and components that can be easily customized and extended to meet various needs.
Using Bootstrap, developers can focus more on the functionality and logic of a website or application, rather than having to write CSS styles and design page layouts from scratch.
- It provides support for responsive layout, allowing the page to adapt to different devices and screen sizes.
- In addition, Bootstrap also provides a rich set of UI components (such as navigation bars, buttons, forms, modal boxes, etc.), allowing developers to easily use these ready-made components in projects.
All in all, Bootstrap is a powerful development tool that can help developers quickly build modern and adaptive websites or applications.

Bootstrap introduction

Chinese document query: https://www.bootcss.com/

CDN accelerated link

twitter-bootstrap Bootstrap is the world’s most popular front-end component library for developing responsive layout, mobile-first WEB projects.

Compressed document link introduction

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js

Note

Network connection introduction will not prompt relevant supplements locally.
Downloading local documents is more friendly

Bootstrap’s js code is based on jQuery

Be sure to introduce jQuery when using bootstrap for dynamic effects!!!

Layout container

A layout container is a container or container class used to organize and arrange other elements. In front-end development, there are three commonly used layout containers:

Block-Level Layout Container (Block-Level Layout Container):

The block-level layout container will generate a block-level box, which can be set to “block”, “flex” or “grid” using the display attribute. Common HTML elements such as
,

etc. are all block-level layout containers. Block-level containers occupy an exclusive line and are arranged vertically from top to bottom through CSS properties.

Inline Layout Container (Inline Layout Container):

Inline layout containers generate an inline box, which can be set to “inline” or “inline-block” using the display attribute. Common HTML elements such as,,, etc. are all inline layout containers. In-line containers are arranged horizontally from left to right to the edge of the line, and then wrap automatically.

Flexbox Layout Container:

Flexible layout container is a new layout technology in CSS3. By defining the parent element as a flexible container, its child elements are called flexible items. Flexible containers flexibly control and adjust the size and position of flexible items through a series of properties. Common attributes include: flex-direction, justify-content, align-items, etc. The main benefit of flexible layout containers is that they can achieve responsive layout and flexible arrangement.

blank

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
    <script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

   <style>
      .c1 {
         height: 1000px;
         width: 1000px;
         background-color: red;
      }

      .c2 {
         height: 1000px;
         width: 1000px;
         background-color: red;
      }
   </style>

</head>
<body>
<div class="container c1"></div> /*There is white space on the left and right sides*/
<div class="container-fluid c2"></div> /*No white space on the left and right sides*/
</body>
</html>

Grid system

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Local link introduction method -->
    <!-- Websource folder, copy it to the current folder and use it -->
    <script src="Websource\jQuery\\
ode_modules\jquery\dist\jquery.min.js"></script>
    <script src="Websource\Bootstrap\js\bootstrap.min.js"></script>
    <link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
    <!-- CDN link introduction method -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
    <script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jquery</script>
 
    <style>
        .c1 {
            height: 100px;
            background-color: red;
            border: 5px solid black;
 
        }
 
        .c2 {
            height: 100px;
            background-color: green;
        }
    </style>
 
 
</head>
<body>
 
<div class="container">
    <div class="row">
        <div class="col-md-6 c1"></div>
        <div class="col-md-6 c1"></div>
 
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
    </div>
 
</div>
 
</body>
</html>

<div class="row">
Writing a row means dividing the area into 12 parts
<div class="col-md-6"></div>
Write a col-md-6 to get the desired number of copies

Column offset

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

Typesetting

When setting up the page, bootstrap sets the font to a better-looking font that is acceptable to the naked eye.

Form tags

For form forms, give priority to adding styles to form-control

Button Group

Color

<!-- Standard button -->
<button type="button" class="btn btn-default">(Default style)Default</button>
 
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(Preference)Primary</button>
 
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(Success)Success</button>
 
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(General information)Info</button>
 
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(Warning)Warning</button>
 
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(Danger)Danger</button>
 
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(Link)Link</button>

size

<p>
  <button type="button" class="btn btn-primary btn-lg">(Large button)Large button</button>
  <button type="button" class="btn btn-default btn-lg">(Big button)Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">(Default size)Default button</button>
  <button type="button" class="btn btn-default">(Default size)Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">(small button)Small button</button>
  <button type="button" class="btn btn-default btn-sm">(small button)Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">(Extra small size)Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">(Extra small size)Extra small button</button>
</p>

Pictures

shape

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Color

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Clear Float

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
   &:before,
   & amp;:after {
    content: " ";
    display: table;
  }
   & amp;:after {
    clear: both;
  }
}
 
// Usage as a mixin
.element {
  .clearfix();
}

icon

span tag

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
 
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

You can change the color – the same method as normal text
<script>
.c {color:red;}
</script>

Icon reference website: https://fontawesome.com.cn/