The Bootstrap – UI framework

Responsive front-end layout, mobile first Web project development

The Bootstrap structure

The basic structure

  • With grid system, link style, background

features

  • Global CSS Settings
  • Define basic HTML element styles
  • Extensible class
  • Advanced grid system

component

  • Contains more than a dozen reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, carousel graphs, and more

JavaScript plugin

  • Contains more than a dozen custom jQuery plug-ins

Layout system (12 columns in a row)

  1. . Container Container layout (fixed layout width: auto)
  2. Container-fluid layoutWidth: 100%)
    • The above two layouts are the most basic elements of a layout grid system
  3. Adaptive corresponding response mode is media (media query)

Grid system

  • A mobile-first grid system
  • Layout based on 12 columns, 5 response sizes (different screens)
  • Built entirely with flexbox streaming layout, it fully supports responsive standards
  • Specifically, the rows, columns, and aligned content of div containers are used to build a responsive layout
<div class="container"><! Container Fluid will occupy 100% of the screen -->
        <div class="row">
            <div class="col-sm-1">1</div> <! -- sm specifies the screen type. Col-sm -* Can also force the grid occupied by each column -->
            <div class="col-sm">2</div>
            <div class="col-sm">3</div>
        </div>
</div>
Copy the code

[Note] each row 12 columns, less than empty, more line feed

Grid level

Responsive layout

Ultra-small screen (<576px) A small screen (576 px or higher) Medium screen (≥768px) Large screen (≥992px) Large screen (≥1200px)
The largest containerThe width of the None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
The number of columns 12 12 12 12 12
  • If two or more levels are used at the same time, follow the principle of mobile first
  • The raster system supports specifying one or more level variations of a mixed layout
<div class="container"><! Container Fluid will occupy 100% of the screen -->
        <div class="row">
            <div class="col-2 col-sm-1">1</div> <! -- sm specifies the screen type. Col-sm -* Can also force the grid occupied by each column -->
            <div class="col-3 col-sm-1">2</div>
            <div class="col-7 col-sm-10">3</div><! Use 2, 3, 7 columns when the screen width is less than 576px and 1, 1, 10 columns when the screen width is greater than or equal to 576px.
        </div>
</div>
Copy the code

  • You can forcibly cut the number of columns by class= “W-100”

    <div class="container">
        <div class="row">
            <div class="col-sm">1</div>
            <div class="w-100"></div><! -- Cut 2 rows, 1, 2, 3 -->
            <div class="col-sm">2</div>
            <div class="col-sm">3</div>
        </div>
</div>
Copy the code

    [Note] If col-sm-* is specified, it will not be automatically expanded, but will still be cut

Adaptive hiding in explicit methods on different screens

To hide elements, simply use the.d-none class in response to any screen changes:

.d-{sm,md,lg,xl}-none

.d-none All screens are invisible,.d-block All screens are visible

Only explicit elements at a given screen size interval

You can combine a. D -*none class with a. D -*-* class. D-none. D-md-block. D-xl-none. After. D-md-none Medium is not displayed afterCopy the code

Alignment and sorting

Grid alignment

Line alignment, applied to rows where height is lower than the height of the container makes sense

style
Top (default) .align-items-start
In the middle .align-items-center
In the end .align-items-end

Column alignment, applied to the column

style
In the top .align-self-start
In the middle .align-self-center
In the end .align-self-end

Less than 100% padding (no 12 columns), horizontal alignment, applied to rows

style
The left .justify-content-start
In the middle .justify-content-center
In the right .justify-content-end
Equally spaced (scattered) .justify-content-around
Align both ends (spread out) .justify-content-between

Grid sorting

  • .order-n, N is 12, and.order-1 is the first column
  • .order-first is forcibly set to the first column and.order-last to the last column
  • .offset -n or. Offset -* -n sets the offset of the column, where N indicates the number of grid columns, i.e. the number of empty columns
  • .mL-n or.MR-n fine tuning column distance, small voids
  • Ml-auto and. Mr-auto are aligned. M-auto is aligned at both ends

The content layout

The title class

<h1>~</h6> can create headings of different sizes if using other elements, <p> or <div>, call. H1 ~6 can also implement headingsCopy the code
  • A **. Text-intensive ** pattern was used to construct subordinate subtitles to a major title
  • Another way to use larger, more eye-catching headings:.display-1~-4

The text class

  • Lead, emphasize content

  • More commonly used HTML5 text inline elements

  • The.title style and abbreviations prompt the text

  • <blockquote source Remarks,. Blockquote -footer

The list of classes

  • Using the. List-unstyled style, the list can be initialized and styled clean

  • Use a combination of. List-inline and. List-inline-item to implement a multi-column, side-by-side list

java Python PHP js

  • Horizontal description is implemented using DL, DT, and DD. Text-trunacte can omit overflow ·

Code in graphics

【 note 】 < KBD

Table style

Colors and borders

Utility classes – Common styles

<button class="close"><span>&times;</span></button>Close buttonCopy the code

Invisible positions do not occupy but in fact still exist, invisible hidden content occupy positions, content still exist

Flex Flex layout

Align-items are vertical. Align-self is for a single subitem

Rows, for each column layout; Columns, for each row layout