Front end Bootstrap framework

Bootstrap introduction

Bootstrap is Twitter's open source front-end framework based on HTML, CSS and JavaScript.

It is a set of front-end toolkit designed for rapid development of Web applications.

It supports responsive layout and adheres to mobile device priority after V3 version.

Why use Bootstrap?

Before Bootstrap appears:

Naming: repetitive, complex and meaningless (it's hard to think of a name)

Style: repetitive, redundant, nonstandard and disharmonious

Page: disorder, nonstandard and disharmony

After using Bootstrap: all kinds of naming are unified and standardized. The page style is unified and the picture is harmonious.

Bootstrap Download

Official address:

Chinese Address:

We use the V3 version of Bootstrap, and we download the Bootstrap for the production environment.

Bootstrap environment construction

Directory structure:

├── css  // CSS file
│   ├── bootstrap-theme.css  // Bootstrap theme style file
│   ├──
│   ├── bootstrap-theme.min.css  // Theme related style compressed file
│   ├──
│   ├── bootstrap.css
│   ├──
│   ├── bootstrap.min.css  // Core CSS style compressed file
│   └──
├── fonts  // Font file
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS file
    ├── bootstrap.js
    ├── bootstrap.min.js  // Core JS compressed file
    └── npm.js

Processing dependency

Since some components of Bootstrap depend on jQuery, please make sure to download the corresponding version of jQuery file to ensure the normal operation of relevant components of Bootstrap.

Bootstrap global style

Global styles are provided in Bootstrap for HTML elements commonly used by us, such as typesetting, buttons, tables, forms, pictures and so on.

As long as we set class on the basic HTML elements, we can apply the style of Bootstrap, so as to make our page more beautiful and harmonious.

Title Related


<h1>Primary title 36 px</h1>
<h2>Secondary TITLE 30 px</h2>
<h3>Level 3 TITLE 24 px</h3>
<h4>Level IV title 18 px</h4>
<h5>Level V TITLE 14 px</h5>
<h6>Level 6 title 12 px</h6>
<!--In addition to using h label, Bootstrap Corresponding global styles are built in-->
<!--Apply Title style to inline labels-->
<span class="h1">Primary title 36 px</span>
<span class="h2">Secondary TITLE 30 px</span>
<span class="h3">Level 3 TITLE 24 px</span>
<span class="h4">Level IV title 18 px</span>
<span class="h5">Level 5 title px</span>
<span class="h6">Level 6 title 12 px</span>


<!--Embedding subheadings in primary headings-->
<h1>Primary title<small>Subtitle</small></h1>

align text

<!--align text-->
<p class="text-left">Align text left</p>
<p class="text-center">Text centered</p>
<p class="text-right">Align text right</p>

Text case

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>


Class describe
.table-striped Striped table
.table-bordered Bordered table
.table-hover Mouse over color changing table
.table-condensed Compact table
.table-responsive Response form

State class

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


Inline form

Form status

Form with Icon


<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Button style

<!-- 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">((preferences) Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">((successful) 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>

Button size

  <button type="button" class="btn btn-primary btn-lg">((large button) Large button</button>
  <button type="button" class="btn btn-default btn-lg">((large button) Large button</button>
  <button type="button" class="btn btn-primary">((default size) Default button</button>
  <button type="button" class="btn btn-default">((default size) Default button</button>
  <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>
  <button type="button" class="btn btn-primary btn-xs">(Ultra small size) Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">(Ultra small size) Extra small button</button>


<img src="..." class="img-responsive" alt="Responsive image">

Picture shape

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

Auxiliary class

text color

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

background 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>

close button

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Pull down triangle

<span class="caret"></span>

Fast floating

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Center content block

<div class="center-block">...</div>

Clear float

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

Show and hide

<div class="show">...</div>
<div class="hidden">...</div>

Common Bootstrap components

  1. Font Icon
  2. drop-down menu
  3. Button group
  4. Input box
  5. Navigation
  6. paging
  7. Labels and badges
  8. Page header
  9. Shrinkage diagram
  10. progress bar

Simulated scrolling progress bar:

var $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);

function setValue() {
  if (width === 100) {
  } else {
    $d1.css("width", width+"%").text(width+"%");

Simulated scrolling progress bar


Responsive development

Why responsive development?

With the popularity of mobile devices, web design must consider the design of mobile terminals. In order to be compatible with the display of PC and mobile terminals, the same website needs to be developed responsively.

What is responsive?

Use media query to make the same website compatible with different terminals (PC terminal and mobile terminal) and present different page layouts.

Technology used:

CSS3@media query

It is used to query whether the equipment meets a specific condition, including screen size, touchability, screen accuracy, horizontal screen, vertical screen and other information.

Common attributes:

  • Device width, device height
  • Width and height render window width and height
  • orientation device direction
  • Resolution device resolution


@media mediatype and|not|only (media feature) {

Different media use different stylesheet s

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">


The mobile browser places the page in a virtual "window". Usually, the virtual "window" is wider than the screen, so that each web page does not have to be squeezed into a very small window (which will destroy the layout of the web page not optimized for the mobile browser). Users can see different parts of the web page by panning and zooming.

Set viewport

A commonly used viewport meta tag for pages optimized for mobile web pages is roughly as follows:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1″>
  • Width: controls the size of the viewport. You can specify a value, such as 600, or a special value. For example, device width is the width of the device (the unit is the pixel of CSS when it is scaled to 100%).
  • Height: corresponding to width, specify the height.
  • Initial scale: initial scale, that is, the scale when the page is load ed for the first time.
  • Maximum scale: the maximum scale to which the user is allowed to zoom.
  • Minimum scale: the minimum scale to which the user is allowed to zoom.
  • User scalable: whether the user can scale manually.

Bootstrap grid system

  • container
  • row
  • column

Note: when using Bootstrap, do not conflict your name with the class name of Bootstrap.

Tags: Front-end

Posted by parthatel on Sun, 08 May 2022 15:15:54 +0300