Bootstrap Learning Document for Girlfriend (3)

Posted by decessus on Wed, 29 May 2019 11:19:59 +0200


Bootstrap

Note that many of the following components require js, so you need to introduce Bootstrap's JS files and
jquery file in the sample code, I just did not write, pay attention to add oh.

Font Icon

Bootstrap also has free icons for us to use. These icons are very simple to use. Just like using fonts, changing the size of icons means changing font-size of fonts. Changing the color of icons means changing the color of fonts. With these icons, you don't have to cut any more. There are also third-party icons that we can use, for example Font Awesome It's also the font icon. In Bootstrap's download package, remember to introduce fonts files so that icons can be displayed.

The sample code is as follows:

<div class="container">
  <div class="row">
    <span class="glyphicon glyphicon-star" style="font-size: 40px; color: red;"></span>
  </div>
  
  <button class="btn btn-danger">
    <span class="glyphicon glyphicon-camera" style="color: #000;"></span> kaivon
  </button>
</div>

Button group

  • btn-group button group
  • btn-group-* Change the size of the button, and the content of * is lg md sm xs
  • btn-group-vertical button groups are arranged vertically
  • btn-group-justified to align the two ends of the button, three ways of implementation, recommended the use of a tag
    • If it's a button tag, you need to add a parent to them and a btn-group class to the parent.
    • If it's an input tag, you need to add a parent to them and a btn-group class to the parent.
    • If it's a tag, you don't need to add a parent to it. It's easy to write.

The sample code is as follows:

<div class="container">
  <!--Single button-->
  <div class="row">
    <button class="btn btn-primary">kaivon</button>
    <button class="btn btn-success">kaivon</button>
    <button class="btn btn-info">kaivon</button>
  </div>
  
  <!--Button group-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
  </div>
  
  <!--Button group-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group btn-group-lg">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
    <div class="btn-group btn-group-md">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
    <div class="btn-group btn-group-sm">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
    <div class="btn-group btn-group-xs">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
  </div>
  
  <!--Button group,Vertical row-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group-vertical">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
  </div>
  
  <!--btn Align the ends, if you say so. button，That would add a parent to them and a parent to them. btn-group Of class-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group btn-group-justified">
      <div class="btn-group">
        <button class="btn btn-primary">kaivon</button>
      </div>
      <div class="btn-group">
        <button class="btn btn-success">kaivon</button>
      </div>
      <div class="btn-group">
        <button class="btn btn-info">kaivon</button>
      </div>
    </div>
  </div>
  
  <!--btn Align the ends, if you say so. input，That would add a parent to them and a parent to them. btn-group Of class-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group btn-group-justified">
      <div class="btn-group">
        <input type="button" class="btn btn-primary" value="kaivon" />
      </div>
      <div class="btn-group">
        <input type="button" class="btn btn-success" value="kaivon" />
      </div>
      <div class="btn-group">
        <input type="button" class="btn btn-info" value="kaivon" />
      </div>
    </div>
  </div>
  
  <!--btn Align the ends, if you say so. a Labels do not need to be added to them as a parent, which is easier to write.-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group btn-group-justified">
      <a href="#" class="btn btn-primary">kaivon</a>
      <a href="#" class="btn btn-success">kaivon</a>
      <a href="#" class="btn btn-info">kaivon</a>
    </div>
  </div>
</div>
  • Button group icon
    Button groups can be added icons, such as common drop-down button icons, while adding different ways, the following is given three different tag additions, input tags can not be used in this way.

The sample code is as follows:

<!--Add triangles to buttons-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group">
      <button class="btn btn-primary">kaivon <span class="caret"></span></button>
      <a href="#" class="btn btn-success">kaivon <span class="caret"></span></a>
      <input type="button" class="btn btn-info" value="kaivon" /> <span class="caret"></span>
    </div>
  </div>
  
  <!--Trial to add a triangle to the button-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-primary"><span class="caret"></span></button>
    </div>
  </div>
  
  <!--Trial to add triangle to the button-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group dropup">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-primary"><span class="caret"></span></button>
    </div>
  </div>

drop-down menu

It only takes three steps to make a drop-down menu with Bootstrap. Bootstrap's official website is somewhat complicated because Bootstrap takes into account the experience of users like screen readers, which we don't need.

  • 1. Add a dropdown class to the parent div or a location attribute to the parent div
  • 2. Add a data-toggle="dropdown" attribute to the button button, preferably a dropdown-toggle class, which can eliminate the halo on the button.
  • 3.ul needs to add a dropdown-menu class

The sample code is as follows:

<div class="container">
  <div class="row">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Front end <span class="caret"></span></button>
      
      <ul class="dropdown-menu">
        <li><a href="#">html</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">javascript</a></li>
        <li><a href="#">less</a></li>
        <li><a href="#">bootstrap</a></li>
      </ul>
    </div>
  </div>
</div>

Style of drop-down menu
In addition to the default style above, the drop-down menu has other different styles, such as right alignment (left alignment by default), and there are also styles to choose from in the drop-down menu.

  • The open default menu is expanded to add dropdown
  • dropup lets the menu appear on it, replacing the default drop down with drop up
  • dropdown-menu-right drop-down menu right alignment, pay attention to the button button position, to fill the entire parent, you can use the button btn-block class name
  • The drop down-header menu has a title, add to li
  • text-center centers content in the middle, which is also applicable to paragraph p tags.
  • divider separator, add li

The sample code is as follows:

<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="dropdown open">
        <button class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown">Open by default <span class="caret"></span></button>
        
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">html</a></li>
          <li><a href="#">css</a></li>
          <li><a href="#">javascript</a></li>
          <li><a href="#">less</a></li>
          <li><a href="#">bootstrap</a></li>
        </ul>
      </div>
    </div>
    <div class="col-lg-4" style="margin-top: 150px;">
      <div class="dropup">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Expand upward <span class="caret"></span></button>
        
        <ul class="dropdown-menu">
          <li><a href="#">html</a></li>
          <li><a href="#">css</a></li>
          <li><a href="#">javascript</a></li>
          <li><a href="#">less</a></li>
          <li><a href="#">bootstrap</a></li>
        </ul>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">With headings and splitters <span class="caret"></span></button>
        
        <ul class="dropdown-menu">
          <li class="dropdown-header text-center"><a href="#">Front End</a></li>
          <li><a href="#">html</a></li>
          <li><a href="#">css</a></li>
          <li><a href="#">javascript</a></li>
          <li><a href="#">less</a></li>
          <li><a href="#">bootstrap</a></li>
          <li class="divider"></li>
          <li class="dropdown-header text-center"><a href="#">Backend</a></li>
          <li><a href="#">php</a></li>
          <li><a href="#">java</a></li>
          <li class="disabled"><a href="#">.net</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Input box

  • The input-group input box group, which can only be targeted at the input box, is part of the form-group we mentioned earlier.
  • Additional elements added before and after input-group-addon to the input box
  • input-group-* modifies the size of the input box group. Unlike before, the content of * here has only three sizes: lg md sm.
  • input-group-btn adds the extra element of button, which is wrapped with span tag, drop-down menu button, div wrapped outside, pay attention to it.

The sample code is as follows:

<div class="container">
      <div class="row">
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" />
        </div>
      </div>
      
      <!--Size of input box group-->
      <div class="row" style="margin-top: 10px;">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" />
        </div>
        
        <div class="input-group input-group-md">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" />
        </div>
        
        <div class="input-group input-group-sm">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" />
        </div>

        <!--There is no such size.-->
        <!--<div class="input-group input-group-xs">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" />
        </div>-->
      </div>
      
      
      <!--What's in the extra content is checkbox-->
      <div class="row" style="margin-top: 10px;">
        <div class="input-group">
          <span class="input-group-addon">
            <input type="checkbox" />
          </span>
          <input type="text" class="form-control" />
        </div>
      </div>
      
      <!--What's in the extra content is radio-->
      <div class="row" style="margin-top: 10px;">
        <div class="input-group">
          <span class="input-group-addon">
            <input type="radio" />
          </span>
          <input type="text" class="form-control" />
        </div>
      </div>
      
      <!--There are buttons in the extra content.-->
      <div class="row" style="margin-top: 10px;">
        <div class="input-group">
          <input type="text" class="form-control" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default">search</button>
          </span>
        </div>
      </div>
      
      <!--There are buttons in the extra content.-->
      <div class="row" style="margin-top: 10px;">
        <div class="input-group">
          <div class="input-group-btn">
              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Begonia College Course <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">javascript</a></li>
                <li><a href="#">less</a></li>
                <li><a href="#">bootstrap</a></li>
              </ul>
          </div>
          <input type="text" class="form-control" />
        </div>
      </div>
    </div>

Navigation

Navigation in Bootstrap can be divided into tab navigation, breadcrumb navigation, two-end alignment navigation, which can be selected and used as needed, and the pull-down menu can be put down in navigation.

The sample code is as follows:

  • Basic Styles of Navigation
  • nav-tabs Labeled Navigation
  • nav-pills Capsule Navigation
  • nav-stacked navigation in vertical row
  • nav-stacked two-terminal alignment navigation
<div class="container">
  <div class="row">
    <ul class="nav nav-tabs">
      <li><a href="#">Programmer</a></li>
      <li class="active"><a href="#"> Procedure</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>
  
  <div class="row" style="margin-top: 10px;">
    <ul class="nav nav-pills">
      <li><a href="#">Programmer</a></li>
      <li class="active"><a href="#"> Procedure</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>
  
  <div class="row" style="margin-top: 10px;">
    <ul class="nav nav-pills nav-stacked">
      <li><a href="#">Programmer</a></li>
      <li class="active"><a href="#"> Procedure</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>
  
  <div class="row" style="margin-top: 10px;">
    <ul class="nav nav-pills nav-justified">
      <li><a href="#">Haitang College</a></li>
      <li class="active"><a href="#">Chen Xuehui</a></li>
      <li><a href="#">kaivon</a></li>
    </ul>
  </div>
  
  
  <!--Pull-down menu in navigation -->
  <div class="row" style="margin-top: 10px;">
    <ul class="nav nav-tabs">
      <li><a href="#">Haitang College</a></li>
      <li class="active"><a href="#">Chen Xuehui</a></li>
      <li><a href="#">kaivon</a></li>
      <li>
        <a href="#"Data-toggle=" dropdown "> Begonia College Course < span class=" caret ">.</span></a>
        <ul class="dropdown-menu">
          <li><a href="#">html</a></li>
          <li><a href="#">css</a></li>
          <li><a href="#">javascript</a></li>
          <li><a href="#">less</a></li>
          <li><a href="#">bootstrap</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

tab

The navigation above can be tabbed so that pages with more content can be effectively separated.

Steps for making tabs:

  • 1. All content corresponding to navigation needs to be placed in a layer class ified as tab-content
  • 2. A content block should be added a class named tab-pane l, and an active class should be added to the corresponding default content.
  • 3. Add a data-toggle="tab" custom attribute representation tab to each navigation label a. Remember the value of data-toggle in the drop-down menu? Yes, it's dropdown.
  • 4. Add an id to each content section
  • 5. Add an anchor to label a in each navigation

The sample code is as follows:

<style>
  .tab1{
    border: 1px solid #ddd;
    border-top: none;
    padding: 100px;
    border-radius: 0 0 5px 5px;
  }
</style>

<div class="container">
  <div class="row">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#Content1 "data-toggle=" tab "> programmer</a></li>
      <li><a href="#Content2 "data-toggle=" tab "> program Yuan</a></li>
      <li><a href="#content3" data-toggle="tab">code</a></li>
    </ul>
    <div class="tab-content">
      <div id="content1" class="tab-pane active">html</div>
      <div id="content2" class="tab-pane">css</div>
      <div id="content3" class="tab-pane">js</div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-lg-4">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#Content4 "data-toggle=" tab "> programmer</a></li>
        <li><a href="#Content5 "data-toggle=" tab "> program Yuan</a></li>
        <li><a href="#content6" data-toggle="tab">code</a></li>
      </ul>
      <div class="tab-content tab1">
        <div id="content4" class="tab-pane active">html</div>
        <div id="content5" class="tab-pane">css</div>
        <div id="content6" class="tab-pane">js</div>
      </div>
    </div>
  </div>
</div>

Navigation bar

  1. Basic style of navigation bar
  • Basic Style of navbar Navigation Bar
  • Fixed Style Combination class for Menus in Navbar-Nav Navigation Bar
  • Default style of navbar-default navigation bar
  • navbar-inverse navigation bar style is black
  • navbar-static-top navigation bar is at right angle, changing the default rounded corner effect of navigation bar
  • navbar-fixed-top navigation bar is fixed at the top, so you need to add a padding or margin to the body so that the fixed navigation bar does not cover the following content.
    - navbar-fixed-bottom navigation bar is fixed at the bottom and will not change with rolling.

The sample code is as follows:

<body style="padding: 50px 0; height: 2000px;">
<div class="container">
  <!--Navigation Bar of Default Style-->
  <nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Haitang College</a></li>
      <li><a href="#">Chen Xuehui</a></li>
      <li><a href="#">kaivon</a></li>
    </ul>
  </nav>
  
  <!--Black navigation strip-->
  <nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Haitang College</a></li>
      <li><a href="#">Chen Xuehui</a></li>
      <li><a href="#">kaivon</a></li>
    </ul>
  </nav>
  
  <!--Black navigation strip-->
  <nav class="navbar navbar-inverse navbar-static-top">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Haitang College</a></li>
      <li><a href="#">Chen Xuehui</a></li>
      <li><a href="#">kaivon</a></li>
    </ul>
  </nav>
  
  <!--Navigation bar fixed on top-->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Haitang College</a></li>
      <li><a href="#">Chen Xuehui</a></li>
      <li><a href="#">kaivon</a></li>
    </ul>
  </nav>
  
  <!--Navigation bar fixed on top-->
  <nav class="navbar navbar-default navbar-fixed-bottom">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Haitang College</a></li>
      <li><a href="#">Chen Xuehui</a></li>
      <li><a href="#">kaivon</a></li>
    </ul>
  </nav>
</div>
</body>

2. Advancement of navigation bar

  • navbar-header navigation head, usually logo
  • navbar-brand is used to put logo. It needs to cooperate with navbar-header.

The sample code is as follows:

<!--Generally speaking, they will nav Tag Package container Outside, solve active Item spillovers-->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>
    
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Programmer</a></li>
      <li><a href="#"> Procedure</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>
</nav>

<!--Alignment navigation bar-->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>
    <!--navbar-left Represents content aligned to the left-->
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#">Programmer</a></li>
      <li><a href="#"> Procedure</a></li>
      <li><a href="#">code</a></li>
    </ul>
    <!--navbar-left Represents content aligned to the right-->
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Login</a></li>
      <li><a href="#">Registration</a></li>
    </ul>
  </div>
</nav>

<! - Navigation bar with links and text - >
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>
    <! -- Navbar-left indicates that the content is aligned to the left - >
    <ul class="nav navbar-nav navbar-left">
      <li class="active">a href="">programmer</a></li>
      <li> <a href=""> Program Yuan</a></li>
      <li><a href="#">code</a></li>
    </ul>
    <! - If there is text in the navigation, navbar-text should be added to the text, and if there is a link, navbar-text should be added to the link.
    <a href="#" class= "navbar-link navbar-text"> link</a>
    <p class="navbar-text">Here is a paragraph</p>
    <! -- Navbar-left indicates that the content is aligned to the right - >
    <ul class="nav navbar-nav navbar-right">
      <li> <a href=""> Log on</a></li>
      <li> <a href=""> Registration</a></li>
    </ul>
  </div>
</nav>

<!--Navigation bar with form-->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>
    <!--navbar-left Represents content aligned to the left-->
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#">Programmer</a></li>
      <li><a href="#"> Procedure</a></li>
      <li><a href="#">code</a></li>
    </ul>
    <!--If there is only one button in the navigation, add one to it. navbar-btn-->
    <button class="btn btn-default navbar-btn">search</button>
    <!--If there is one in the navigation form，That needs to be given. form Add one navbar-form，To display them in one line, add one navbar-left-->
    <form action="http://www.apeclass.com/" class="navbar-form navbar-left">
      <input type="text" class="form-control" />
      <button class="btn btn-default">search</button>
    </form>
    <!--navbar-left Represents content aligned to the right-->
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Login</a></li>
      <li><a href="#">Registration</a></li>
    </ul>
  </div>
</nav>

Path navigation

In more complex point pages, sometimes we need to let users know where they are, so we can use the path navigation component, which is very simple to use.

The sample code is as follows:

<div class="container">
  <div class="row">
    <ul class="breadcrumb">
      <li><a href="#">bootstrap</a></li>
      <li><a href="#">dist</a></li>
      <li class="active">css</li>
    </ul>
  </div>
</div>

paging

For a large number of list content, we need to use paging function to display part of the content, Bootstrap provides us with paging components.

The sample code is as follows:

<div class="container">
  <div class="row">
    <ul class="pagination">
      <li class="disabled"><a href="#"><<</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">>></a></li>
    </ul>
  </div>
  
  <div class="row">
    <ul class="pagination pagination-lg">
      <li class="disabled"><a href="#"><<</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">>></a></li>
    </ul>
  </div>
  
  <div class="row">
    <ul class="pagination pagination-md">
      <li class="disabled"><a href="#"><<</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">>></a></li>
    </ul>
  </div>
  
  <div class="row">
    <ul class="pagination pagination-sm">
      <li class="disabled"><a href="#"><<</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">>></a></li>
    </ul>
  </div>

Page turning
Can be separated on both sides, just add the class class class names of previous and next

  <ul class="pager">
    <li><a href="#">Previous page</a></li>
    <li><a href="#"> Next page"</a></li>
  </ul>
  <ul class="pager">
    <li class="previous disabled"><a href="#">Previous page</a></li>
    <li class="next"><a href="#"> Next page"</a></li>
  </ul>
</div>

sign

Sometimes we want to show the number of messages, just like QQ or Wechat, we can add a practical tag class to the span tag.

The sample code is as follows:

<div class="container">
  <div class="row">
    <a href="#"> Unread message < span class=" badge "> 12</span></a>
    <button class="btn btn-primary">Unread message<span class="badge">12</span></button>
  </div>
</div>

Giant screen

Giant curtain can be used in full screen display or paving the entire page, but also in the header, a very useful class.

The sample code is as follows:

<div class="container">
  <div class="jumbotron">
    <h1> Programmer</h1>
    <p> programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer</p>
    <p> <a href="" class="btn btn-primary">program Yuan</a></p>
  </div>
</div>


<div class="jumbotron">
  <div class="container">
    <h1> Programmer</h1>
    <p> programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer programmer</p>
    <p> <a href="" class="btn btn-primary">program Yuan</a></p>
  </div>
</div>

thumbnail

Pictures with the preferred text, just add a thumbnail class name to the parent can become a thumbnail thumbnail thumbnail, and add a caption class name to the text will increase the text and spacing a little.

The sample code is as follows:

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
        ![](logo.jpg)
      </a>
    </div>
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
        ![](logo.jpg)
      </a>
    </div>
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
        ![](logo.jpg)
      </a>
    </div>
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
        ![](logo.jpg)
      </a>
    </div>
  </div>
  
  <!--Can also put thumbnail To the parent, there will be different styles.-->
  <div class="row">
    <div class="col-lg-4">
      <div class="thumbnail">
        <a href="http://www.baidu.com">
          ![](logo.jpg)
        </a>
        <div>
          <h3>Programmer</h3>
          <p>Programmers love programmers love programmers love programmers love programmers love programmers love programmers love programmers</p>
          <p><a href="#" class="btn btn-primary">Program element</a> <a href="#" class="btn btn-danger">code</a></p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="thumbnail">
        <a href="http://www.apeclass.com">
          ![](logo.jpg)
        </a>
        <div class="caption">
          <h3>Programmer</h3>
          <p>Programmers love programmers love programmers love programmers love programmers love programmers love programmers love programmers</p>
          <p><a href="#" class="btn btn-primary">Program element</a> <a href="#" class="btn btn-danger">code</a></p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="thumbnail">
        <a href="http://www.apeclass.com">
          ![](logo.jpg)
        </a>
        <div class="caption">
         <h3>Programmer</h3>
          <p>Programmers love programmers love programmers love programmers love programmers love programmers love programmers love programmers</p>
          <p><a href="#" class="btn btn-primary">Program element</a> <a href="#" class="btn btn-danger">code</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

Warning box

Sometimes when a user fills in the form information, we can fill in some information under the input box with a small button to close. Bootstrap also provides these components for us, instead of writing our own js code, or through custom attributes. data-dismiss="alert" can be used only by adding the class name of alert. By the way, learning Bootstrap is to remember class, not to think about style when we use it.

The sample code is as follows:

<div class="container">
  <div class="row">
    <p class="alert alert-success">Here is a warning box!!!! <button class="close" data-dismiss="alert"> *</button></p>
    <p class="alert alert-info">Here is a warning box!!!! </p>
    <p class="alert alert-warning">Here is a warning box!!!! </p>
    <p class="alert alert-danger">Here is a warning box!!!! </p>
  </div>
</div>

Progress bar

Bootstrap can be used to show the progress of an event. Bootstrap has also made many styles, such as color, stripes, and can also make the progress bar move, but more effect functions still need to be implemented with js.

The sample code is as follows:

<div class="container">
  <div class="row">
    <div class="progress">
      <div class="progress-bar" style="width: 60%;">60%</div>
    </div>
    
    <div class="progress">
      <div class="progress-bar progress-bar-info" style="width: 36%;">36%</div>
    </div>
    
    <div class="progress">
      <div class="progress-bar progress-bar-warning" style="width: 70%;">70%</div>
    </div>
    
    <div class="progress">
      <div class="progress-bar progress-bar-danger" style="width: 20%;">20%</div>
    </div>
    
    <!--Striped progress bar-->
    <div class="progress">
      <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 20%;">20%</div>
    </div>
    
    <!--Progress bar with stacking effect-->
    <div class="progress">
      <div class="progress-bar" style="width: 10%;">10%</div>
      <div class="progress-bar progress-bar-info" style="width: 20%;">36%</div>
      <div class="progress-bar progress-bar-warning" style="width: 30%;">70%</div>
      <div class="progress-bar progress-bar-danger" style="width: 20%;">20%</div>
      <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 10%;">20%</div>
    </div>
  </div>
</div>

Graphic editing

Graphic layout is also a component commonly used in Web pages, such as message or comment area, or text description. Of course, it needs to be combined with other styles to make the text collocation better.

  • media Mixed Arrangement, Default Pictures Aligned
  • The area of the media-left image, shown on the left
  • The area of the media-right image, shown on the right
  • media-middle image centered
  • media-bottom alignment
  • media-body content area
  • Headings in the media-heading content area

The sample code is as follows

<div class="container">
  <div class="row">
    <div class="media">
      <a href="http://www.baidu.com" class="media-left">
        ![](logo.jpg)
      </a>
      <div class="media-body">
        <h4 class="media-heading">programmer</h4>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
      </div>
    </div>
  </div>
  
  <! - The picture is displayed on the right side - >.
  <div class="row">
    <div class="media">
      <div class="media-body">
        <h4 class="media-heading">programmer</h4>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
      </div>
      <a href="http://www.baidu.com" class="media-right">
        ![](logo.jpg)
      </a>
    </div>
  </div>

Complicated Use of Mixed Arrangement of Graphics and Texts

  <! - Both sides have pictures - >.
  <div class="row">
    <div class="media">
      <a href="http://www.baidu.com" class="media-left">
        ![](logo.jpg)
      </a>
      <div class="media-body">
        <h4 class="media-heading">programmer</h4>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
      </div>
      <a href="http://www.baidu.com" class="media-right">
        ![](logo.jpg)
      </a>
    </div>
  </div>
  
  <! - Pictures aligned in center and bottom - >
  <div class="row">
    <div class="media">
       <a href="http://www.baidu.com" class="media-left media-middle">
        ![](logo.jpg)
      </a>
      <div class="media-body">
        <h4 class="media-heading">programmer</h4>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
      </div>
      <a href="http://www.baidu.com" class="media-right media-bottom">
        ![](logo.jpg)
      </a>
    </div>
  </div>

  <! - Another media is nested in the right content - >.
  <div class="row">
    <div class="media">
      <a href="http://www.baidu.com" class="media-left">
        ![](logo.jpg)
      </a>
      <div class="media-body">
         <h4 class="media-heading">programmer</h4>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
        <div class="media">
          <a href="http://www.baidu.com" class="media-left">
            ![](logo.jpg)
          </a>
          <div class="media-body">
             <h4 class="media-heading">programmer</h4>
            <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
            <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
            <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
            <p> Programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer love programmer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

List group

It can be used for sidebar navigation or display of information lists.

  • list-group list group, add ul
  • list-group-item list item, add li

The sample code is as follows:

<div class="row">
  <ul class="list-group">
    <li class="list-group-item">html</li>
    <li class="list-group-item">css</li>
    <li class="list-group-item">javascript</li>
    <li class="list-group-item">html5/css3</li>
    <li class="list-group-item">less/sass</li>
    <li class="list-group-item">bootstrap</li>
  </ul>
</div>

It can also be used in conjunction with the previous markup component, and the markup will automatically run to the right.

The sample code is as follows:

<!--Add a tag to each list item, and the tag will automatically run to the right.-->
<div class="row">
  <ul class="list-group">
    <li class="list-group-item">html<span class="badge">12</span></li>
    <li class="list-group-item">css<span class="badge">34</span></li>
    <li class="list-group-item">javascript<span class="badge">52</span></li>
    <li class="list-group-item">html5/css3<span class="badge">35</span></li>
    <li class="list-group-item">less/sass<span class="badge">27</span></li>
    <li class="list-group-item">bootstrap<span class="badge">7</span></li>
  </ul>
</div>

List groups can be made not only with ul and li, but also with div plus a tag.

The sample code is as follows:

<!--use a List groups made of tags can add active state, disabled state, background color-->
<div class="row">
  <div class="list-group">
    <a href="#" class="list-group-item active">html<span class="badge">12</span></a>
    <a href="#" class="list-group-item disabled">css<span class="badge">34</span></a>
    <a href="#" class="list-group-item list-group-item-info">javascript<span class="badge">52</span></a>
    <a href="#" class="list-group-item list-group-item-warning">html5/css3<span class="badge">35</span></a>
    <a href="#" class="list-group-item list-group-item-danger">less/sass<span class="badge">27</span></a>
    <a href="#" class="list-group-item list-group-item-success">bootstrap<span class="badge">7</span></a>
  </div>
</div>

The list group can also be headings and paragraphs, which can be used as a list of articles.

  • list-group-item-heading list group title
  • list-group-item-text list group content

The sample code is as follows:

<! - Add a list group of headings and paragraphs, list group heading: list-group-item-heading, list group content: list-group-item-text-->.
<div class="row">
  <ul class="list-group">
    <li class="list-group-item active">
      <h4 class="list-group-item-heading">program yuan</h4>
      <p class="list-group-item-text">program love program ape program love program ape program love program ape program love program</p>
    </li>
    <li class="list-group-item">
      <h4 class="list-group-item-heading">program yuan</h4>
      <p class="list-group-item-text">program love program ape program love program ape program love program ape program love program</p>
    </li><li class="list-group-item">
      <h4 class="list-group-item-heading">program yuan</h4>
      <p class="list-group-item-text">program love program ape program love program ape program love program ape program love program</p>
    </li><li class="list-group-item">
      <h4 class="list-group-item-heading">program yuan</h4>
      <p class="list-group-item-text">program love program ape program love program ape program love program ape program love program</p>
    </li>
  </ul>
</div>

panel

The section with the title and content can be done with the panel.

  • Panel panel
  • panel-default panel default style
  • Head area of panel-heading panel, not just headings, but subheadings, etc.
  • Style of headings in the header area of panel-title panel
  • Content area of panel-body panel

The sample code is as follows:

<div class="container">
<div class="row">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Aiqiu Yan</h3>
    </div>
    <div class="panel-body">
      <p> Love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Aiqiu Yan</h3>
    </div>
    <div class="panel-body">
      <p> Love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-success">
    <div class="panel-heading">
      <h3 class="panel-title">Aiqiu Yan</h3>
    </div>
    <div class="panel-body">
      <p> Love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love</p>
    </div>
  </div>
</div>


<div class="row">
  <div class="panel panel-info">
    <div class="panel-heading">
      <h3 class="panel-title">Aiqiu Yan</h3>
    </div>
    <div class="panel-body">
      <p> Love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-warning">
    <div class="panel-heading">
      <h3 class="panel-title">Aiqiu Yan</h3>
    </div>
    <div class="panel-body">
      <p> Love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-danger">
    <div class="panel-heading">
      <h3 class="panel-title">Aiqiu Yan</h3>
    </div>
    <div class="panel-body">
      <p> Love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love autumn's love</p>
    </div>
  </div>
</div>

Panels can also be used in conjunction with lists. Note that list groups are not placed in panel-body.

The sample code is as follows:

<! - Combination of panel and list group - >
      <div class="row">
        <div class="panel panel-danger">
          <div class="panel-heading">
            <h3 class="panel-title">Begonia College</h3>
          </div>
          <div class="panel-body">
            <p> Focus on front-end training Focus on front-end training Focus on front-end training Focus on front-end training Focus on front-end training Focus on front-end training Focus on front-end training Focus on front-end training</p>
          </div>
          <ul class="list-group">
          <li class="list-group-item">html</li>
          <li class="list-group-item">css</li>
          <li class="list-group-item">javascript</li>
          <li class="list-group-item">html5/css3</li>
          <li class="list-group-item">less/sass</li>
          <li class="list-group-item">bootstrap</li>
        </ul>  
        </div>
      </div>

The above is the whole content of Bootstrap components, ice and snow smart you will surely find some rules to remember, yes, Bootstrap design is very regular, when used to see, with the degradation of nature, you can remember.

Bootstrap series:

Bootstrap Learning Document for Girlfriend (1)
Bootstrap Learning Document for Girlfriend (2)
Bootstrap Learning Document for Girlfriend (3)
Bootstrap Learning Document for Girlfriend (4)

Topics: Javascript less html5 css3

Hot Topics

©2024 Programmer Think