Ten minutes to get started with the front-end UI framework Bootstrap

The introduction

Bootstrap is a simple, intuitive and powerful front-end development framework that makes Web development faster. It brings together some common styles, components, and effects for web page development, allowing developers to use them directly. It makes it easy to write elegant interfaces and improve the efficiency of page development. With it, backend programmers can also write beautiful pages.

However, it is important to note that using Bootstrap does not mean that you do not need to write CSS styles, but rather that you do not need to write most of the styles that you will use.

A, install,

To import the CSS and JS files of Bootstrap in the page, we can directly use the CDN provided by the official.

<! -- Latest Bootstrap core CSS file --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <! -- Optional Bootstrap theme file --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css"> <! -- Latest Bootstrap core JavaScript file --> <script SRC ="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
Copy the code

Second, the use of

Each style and component of Bootstrap corresponds to one or more classes. For example, the code for the blue button is:

<button type="button" class="btn btn-primary"> (preferences) Primary </button>Copy the code

It looks like this on the page:

The BTN and bTN-primary classes define its style.

If familiar with these components are not directly go to the website (https://v3.bootcss.com/css/), we want the component code copy down, into the page in the adjustment.

Three, layout,

Bootstrap defines a raster system to help with layout and layout of page elements. As shown in the figure:

Taking the PC side as an example, it divides the entire screen horizontally into 12 equal sections, with each “row” representing a row, each “col-MD -1” in the “row” representing one of the 12 minutes, and the number after “col-MD -” indicating how many pages the page element occupies in that row.

For example, if we want to set up two plates, the left plate is 25 percent wide and the right plate is 75 percent wide, we could write:


<div class="row">
  <div class="col-md-3"> This is the left section </div> <div class="col-md-9"> This is the section on the right </div> </div>Copy the code

Four, common style

1. The button

<! -- Standard button --> <buttontype="button" class="btn btn-default"> (Default style) Default</button> <! -- Provides extra visual weight and identifies the primary actionin a set of buttons -->
<button type="button" class="btn btn-primary"> (preference) Primary</button> <! -- Indicates a successful or positive action --> <buttontype="button" class="btn btn-success"</button> <! -- Contextual buttonfor informational alert messages -->
<button type="button" class="btn btn-info"> (Info) Info</button> <! -- Indicates caution should be taken with this action --> <buttontype="button" class="btn btn-warning"</button> <! -- Indicates a dangerous or potentially negative action --> <buttontype="button" class="btn btn-danger"< p style = "max-width: 100%; clear: both; min-height: 1em; -- Deemphasize a button by making it look like a linkwhile maintaining button behavior -->
<button type="button" class="btn btn-link"</button>Copy the code

2. TAB

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
Copy the code

3. The navigation bar

<nav class="navbar navbar-default">
  <div class="container-fluid"> <! -- Brand and toggle get groupedfor better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a> </div> <! -- Collect the nav links, forms, and other contentfor toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><! -- /.navbar-collapse --> </div><! -- /.container-fluid --> </nav>Copy the code

4. Paging

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo; </span> </a> </li> <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo; </span> </a> </li> </ul> </nav>Copy the code

Welcome to follow my wechat public account “Full stack Community” to get more front-end, back-end, operation and maintenance technology necessary for webmasters and developers.
SalaSolo 22 yuan American VPS, site host: www.salasolo.com