cool hit counter Bootstrap Learning Documentation (III)_Intefrankly

Bootstrap Learning Documentation (III)


Bootstrap

注意下面 of组件,很多是需要 usefulness到 js of,所以要引入 Bootstrap of js 文件和 The jquery file is in the sample code, I just didn't write it, note the addition of the oh.

Font Icons

Bootstrap 中还带有免费 of图标供我们使 usefulness,这些图标使 usefulness起来很简单,就像使 usefulness字体一样,改变图标 of大小就是改变字体 of font-size,改变图标 of颜色就是改变字体 of颜色 color。有了这些图标,再也不 usefulness切图啦。另外还有第三方 of图标我们可以使 usefulness,比如说 Font Awesome , also this font icon. In the Bootstrap download package, remember to introduce the fonts file so that the icons will show up.

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-* 改变按钮 of尺寸,* of内容为 lg md sm xs
  • btn-group-vertical Button group vertical row
  • btn-group-justified 让按钮 Aligned at both ends,三种实现方式,推荐使 usefulness a label
    • If anything, it's button label, Then you need to add a parent to them, And add a parent to the btn-group of class
    • If anything, it's input label, Then you need to add a parent to them, And add a parent to the btn-group of class
    • If anything, it's a label, then there is no need to add a parent to them, It's easier 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 Aligned at both ends, If anything, it'sbutton, Then you need to add a parent to them, And add a parent to thebtn-group ofclass-->
  <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 Aligned at both ends, If anything, it'sinput, Then you need to add a parent to them, And add a parent to thebtn-group ofclass-->
  <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 Aligned at both ends, If anything, it's a  label, then there is no need to add a parent to them, It's 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图标 Button group中可以添加图标,比如说常见 of下拉按钮图标,,同时添加 of方式也有不同,下面还是给出了三种不同 of label添加,input label是不能这样使 usefulness of。

The sample code is as follows:

<!--Adding 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>
  
  <!-- Try adding a lower triangle to the button if you can get past the group-->
  <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>
  
  <!-- Try adding a triangle to the button if you can get past the group-->
  <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

The official Bootstrap website makes it a bit complicated, because Bootstrap takes into account the experience of users like screen readers, which we don't need.

  • 1.给父级div添加一个 dropdown ofclass,或者给父级添加定位属性
  • 2.给button按钮添加一个data-toggle="dropdown" of属性,最好再加一个dropdown-toggle ofclass,这样可以消除按钮上 of光环
  • 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 the drop-down menu The dropdown menu has other different styles besides the default above, such as a dropdown menu right-aligned (the default is left-aligned), and there are styles to choose from inside the dropdown menu.

  • open 默认菜单是展开 of,给 dropdown 添加
  • dropup 让菜单在上面显示,将默认 of dropdown 换为dropup
  • dropdown-menu-right dropdown menu right-aligned, note the position of the button button, to hold up the whole parent, you can use the btn-block class name of the button
  • The dropdown-header menu has headers to add to li
  • text-center 让内容居中,对段落 p label也是适 usefulness of哦
  • divider divider, add to 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 upwards <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 titles and dividers <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="#"> back end</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

  • input-group input box组,只能针对 input box,是我们前面说到 of form-group of一部分
  • input-group-addon Additional elements to be added before and after the input box
  • input-group-* 修改 input box组 of尺寸,与之前不同 of是,这里 * of内容只有 lg md sm 三种尺寸。
  • input-group-btn 添加 of额外元素是按钮,一般 of按钮 of话 usefulness span label包裹起来, drop-down menu按钮,外面需要 div 包裹起来,注意哦~。

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>
      
      <!-- input box组 of尺寸-->
      <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>

        <!--没有这样 of尺寸-->
        <!--<div class="input-group input-group-xs">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" />
        </div>-->
      </div>
      
      
      <!--额外内容里放 of是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>
      
      <!--额外内容里放 of是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>
      
      <!--额外内容里放 of是按钮-->
      <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>
      
      <!--额外内容里放 of是按钮-->
      <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">Bootstrap programmes <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>

navigator

Bootstrap 中 of navigator分为 label页式 navigator,面包屑式 navigator, Aligned at both ends式 navigator,可以有需要 of选择使 usefulness, navigator里面又可以放 drop-down menu。

The sample code is as follows:

  • nav navigator of基本样式
  • nav-tabs label式 navigator
  • nav-pills Capsule navigation
  • nav-stacked navigator vertical row
  • nav-stacked Aligned at both ends式 navigator
<div class="container">
  <div class="row">
    <ul class="nav nav-tabs">
      <li><a href="#"> programmer</a></li>
      <li class="active"><a href="#"> young lady of the program</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="#"> young lady of the program</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="#"> young lady of the program</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="#"> programmer</a></li>
      <li class="active"><a href="#"> young lady of the program</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>
  
  
  <!--Put drop-down menus in the navigation -->
  <div class="row" style="margin-top: 10px;">
    <ul class="nav nav-tabs">
      <li><a href="#"> young lady of the program</a></li>
      <li class="active"><a href="#"> program apes</a></li>
      <li><a href="#">kaivon</a></li>
      <li>
        <a href="#" data-toggle="dropdown"> programmes <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>

tabs

上面 of navigator可以变成 tabs式 of,这样对于内容较多 of页面就可以进行有效 of分离。

制作 tabs of步骤:

  • 1. navigator对应 of所有内容需要放到一个class为tab-content of层里面
  • 2.A content block is added with a class named tab-pane, and an active class is added to the corresponding default displayed content
  • 3.给每一个 navigator ofa label添加一个data-toggle="tab" of自定义属性表示 tabs,还记得 drop-down menu ofdata-toggle of值吗?没错,是dropdown。
  • 4.Add an id to each content section
  • 5.给每一个 navigator里 ofa label添加一个锚点

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"> young lady of the program</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"> young lady of the program</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>  

navigator条

  1. navigator条 of基本样式
  • navbar navigator条 of基础样式
  • nav navbar-nav navigator条里菜单 of固定样式组合class
  • navbar-default navigator条 of默认样式
  • navbar-inverse navigator条 of样式为黑色
  • navbar-static-top navigator条为直角,改变 navigator条默认 of圆角效果
  • navbar-fixed-top navigator条固定在最上边,需要给body加一个padding或者margin,使得固定 of navigator条不会覆盖下面 of内容 -navbar-fixed-bottom navigator条固定在最下边,不会随滚动 of滚动而变动

The sample code is as follows:

<body style="padding: 50px 0; height: 2000px;">
<div class="container">
  <!--默认样式 of navigator条-->
  <nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"> academy</a></li>
      <li><a href="#"> young lady of the program</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </nav>
  
  <!--黑色 of navigator条-->
  <nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"> academy</a></li>
      <li><a href="#"> young lady of the program</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </nav>
  
  <!--黑色 of navigator条-->
  <nav class="navbar navbar-inverse navbar-static-top">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#"> academy</a></li>
      <li><a href="#"> young lady of the program</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </nav>
  
  <!--固定在上边 of navigator条-->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"> academy</a></li>
      <li><a href="#"> young lady of the program</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </nav>
  
  <!--固定在上边 of navigator条-->
  <nav class="navbar navbar-default navbar-fixed-bottom">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#"> academy</a></li>
      <li><a href="#"> young lady of the program</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </nav>
</div>
</body>

2. navigator条 of进阶

  • navbar-header navigator of头部,一般情况下来放logo
  • navbar-brand usefulness来放logo of,需要配合navbar-header

The sample code is as follows:

<!--一般情况下都会把nav label包在container of外面,解决 active 项溢出 of问题-->
<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="#"> young lady of the program</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>
</nav>
<!--对齐方式 of navigator条-->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>
    <!--navbar-left表示内容以左边对齐-->
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#"> programmer</a></li>
      <li><a href="#"> young lady of the program</a></li>
      <li><a href="#">code</a></li>
    </ul>
    <!--navbar-left表示内容以右边对齐-->
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">登录</a></li>
      <li><a href="#">注册</a></li>
    </ul>
  </div>
</nav>
<!--有 links与文字 of navigator条-->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>
    <!--navbar-left表示内容以左边对齐-->
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#"> programmer</a></li>
      <li><a href="#"> young lady of the program</a></li>
      <li><a href="#">code</a></li>
    </ul>
    <!--如果 navigator里有文字需要给文字加上navbar-text,如果有 links需要给 links加上navbar-text-->
    <a href="#" class="navbar-link navbar-text"> links</a>
    <p class="navbar-text">这里是一段文字</p>
    <!--navbar-left表示内容以右边对齐-->
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">登录</a></li>
      <li><a href="#">注册</a></li>
    </ul>
  </div>
</nav>
<!--有表单 of navigator条-->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>
    <!--navbar-left表示内容以左边对齐-->
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#"> programmer</a></li>
      <li><a href="#"> young lady of the program</a></li>
      <li><a href="#">code</a></li>
    </ul>
    <!--如果 navigator里只有一个按钮,那给它加一个navbar-btn-->
    <button class="btn btn-default navbar-btn"> search</button>
    <!--如果 navigator里有form,那就需要给form添加一个navbar-form,想让它们在一行显示,就要添加一个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表示内容以右边对齐-->
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">登录</a></li>
      <li><a href="#">注册</a></li>
    </ul>
  </div>
</nav>

路径 navigator

在比较复杂点页面中,有时候我们需要让 usefulness户知道自己所处 of位置,我们就可以使 usefulness路径 navigator组件,使 usefulness起来也很简单 of。

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

对一个数量比较多 of列表内容,我们需要使 usefulness paging功能来显示一部分内容,Bootstrap 为我们提供了 paging of组件。

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>

flip 可以分居两边,只需要加上 previous 和 next ofclass 类名

  <ul class="pager">
    <li><a href="#">←上一页</a></li>
    <li><a href="#">下一页→</a></li>
  </ul>
  <ul class="pager">
    <li class="previous disabled"><a href="#">←上一页</a></li>
    <li class="next"><a href="#">下一页→</a></li>
  </ul>
</div>

markers

有时候想显示消息 of数目,就像QQ或者微信那样,我们可以实 usefulness markers类加在 span label上。

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

Jumbo screen can be used in full screen display or spread the whole page, also can be used in the page header, quite practical 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</p>
    <p><a href="#" class="btn btn-primary"> young lady of the program</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</p>
    <p><a href="#" class="btn btn-primary"> young lady of the program</a></p>
  </div>
</div>

thumbnail

The preferred option for images with text is to simply add a thumbnail class name to the parent to turn it into a thumbnail, while adding a caption class name to the text will increase the text to spacing a bit.

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">
        ![](...)
      </a>
    </div>
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
        ![](...)
      </a>
    </div>
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
        ![](...)
      </a>
    </div>
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
       ![](...)
      </a>
    </div>
  </div>
  
  <!--还可以把thumbnail给父级,会有不同 of样式-->
  <div class="row">
    <div class="col-lg-4">
      <div class="thumbnail">
        <a href="http://www.baidu.com">
         ![](...)
        </a>
        <div>
          <h3> programmer</h3>
          <p> programmer爱 young lady of the program programmer爱 young lady of the program programmer爱 young lady of the program programmer爱 young lady of the program</p>
          <p><a href="#" class="btn btn-primary"> young lady of the program</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">
         ![](...)
        </a>
        <div class="caption">
          <h3> programmer</h3>
          <p> programmer爱 young lady of the program programmer爱 young lady of the program programmer爱 young lady of the program programmer爱 young lady of the program</p>
          <p><a href="#" class="btn btn-primary"> young lady of the program</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">
          ![](...)
        </a>
        <div class="caption">
         <h3> programmer</h3>
          <p> programmer爱 young lady of the program programmer爱 young lady of the program programmer爱 young lady of the program programmer爱 young lady of the program</p>
          <p><a href="#" class="btn btn-primary"> young lady of the program</a> <a href="#" class="btn btn-danger">code</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

warning box

有时候 usefulness户在填写表单信息时,我们可以在 input box下面填上一些信息,并带有关闭 of小按钮,Bootstrap 也为我们提供了这些组件,而不 usefulness我们自己在写 js of代码,还是通过自定义属性实现 of,data-dismiss="alert",在使 usefulness时只需要加上 alert of类名即可,其实现在可以感受到,学习 Bootstrap 就是记住 class ,不 usefulness我们在使 usefulness是想样式。

The sample code is as follows:

<div class="container">
  <div class="row">
    <p class="alert alert-success">这里是一个 warning box!!!!<button class="close" data-dismiss="alert">×</button></p>
    <p class="alert alert-info">这里是一个 warning box!!!!</p>
    <p class="alert alert-warning">这里是一个 warning box!!!!</p>
    <p class="alert alert-danger">这里是一个 warning box!!!!</p>
  </div>
</div>

progress bar

It can be used to display the progress of an event, Bootstrap also does a lot of styles, such as colors, stripes, and can also make the progress bar move, but more effects function with js to achieve.

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>
    
    <!-- Progress bar with stripes-->
    <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 layout

graphic layout也是网页上经常使 usefulness of组件,例如在留言或者评论区域,或者文字说明,当然需要结合其他样式使 usefulness,才能是图文搭配 of更好看。

  • media Mixed text, top-aligned images by default
  • media-left 图片 of区域,在左边显示
  • media-right 图片 of区域,在右边显示
  • media-middle image center alignment
  • media-bottom Image aligned down
  • media-body content area
  • media-heading Title in 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">
       ![](...)
      </a>
      <div class="media-body">
        <h4 class="media-heading"> programmer</h4>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
      </div>
    </div>
  </div>
  
  <!--图片在右边显示-->
  <div class="row">
    <div class="media">
      <div class="media-body">
        <h4 class="media-heading"> programmer</h4>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
      </div>
      <a href="http://www.baidu.com" class="media-right">
        ![](...)
      </a>
    </div>
  </div>

Complex use of mixed graphics and text

  <!--左右都有图片-->
  <div class="row">
    <div class="media">
      <a href="http://www.baidu.com" class="media-left">
      ![](...)
      </a>
      <div class="media-body">
        <h4 class="media-heading"> programmer</h4>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
      </div>
      <a href="http://www.baidu.com" class="media-right">
       ![](...)
      </a>
    </div>
  </div>
  
  <!--图片在居中对齐和靠下对齐-->
  <div class="row">
    <div class="media">
       <a href="http://www.baidu.com" class="media-left media-middle">
        ![](...)
      </a>
      <div class="media-body">
        <h4 class="media-heading"> programmer</h4>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
      </div>
      <a href="http://www.baidu.com" class="media-right media-bottom">
       ![](...)
      </a>
    </div>
  </div>

  <!--右侧内容又嵌套了一个media-->
  <div class="row">
    <div class="media">
      <a href="http://www.baidu.com" class="media-left">
       ![](...)
      </a>
      <div class="media-body">
         <h4 class="media-heading"> programmer</h4>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
        <div class="media">
          <a href="http://www.baidu.com" class="media-left">
           ![](...)
          </a>
          <div class="media-body">
             <h4 class="media-heading"> programmer</h4>
            <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
            <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
            <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
            <p> young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer young lady of the program爱 programmer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

list group

It can be used as a sidebar navigation or as a display for a list of information.

  • list-group, add to ul
  • list-group-item list-item, add to 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>

还可以结合前面 of markers组件来使 usefulness,并且 markers会自动跑到右边显示。

The sample code is as follows:

<!--给每个列表项添加了一个 markers,那这个 markers就会自动跑到右侧-->
<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 group不仅可以 usefulness ul 和 li 来做,还可以使 usefulness div 加 a label来做哦。

The sample code is as follows:

<!-- usefulnessa label做 of list group, Activation status can be added, Disable status, 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>

Inside the list group can also be headings plus paragraphs, which can be used to make a list of articles.

  • list-group-item-heading list group标题
  • list-group-item-text list-group-content

The sample code is as follows:

<!--添加标题与段落 of list group, list group标题:list-group-item-heading, list group内容:list-group-item-text-->
<div class="row">
  <ul class="list-group">
    <li class="list-group-item active">
      <h4 class="list-group-item-heading"> young lady of the program</h4>
      <p class="list-group-item-text"> young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes</p>
    </li>
    <li class="list-group-item">
      <h4 class="list-group-item-heading"> young lady of the program</h4>
      <p class="list-group-item-text"> young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes</p>
    </li><li class="list-group-item">
      <h4 class="list-group-item-heading"> young lady of the program</h4>
      <p class="list-group-item-text"> young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes</p>
    </li><li class="list-group-item">
      <h4 class="list-group-item-heading"> young lady of the program</h4>
      <p class="list-group-item-text"> young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes</p>
    </li>
  </ul>
</div>

panel

有标题和内容 of部分就可以 usefulness panel来做。

  • panel panel
  • panel-default panel-default style
  • panel-heading panel of头部区域,不只是标题,还有副标题等等
  • panel-title panel of头部区域里标题 of样式
  • panel-body panel of内容区域

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">爱秋 of艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋 of艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-success">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋 of艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳</p>
    </div>
  </div>
</div>


<div class="row">
  <div class="panel panel-info">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋 of艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-warning">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋 of艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-danger">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋 of艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳爱秋 of艳</p>
    </div>
  </div>
</div>

panel还可以结合列表来使 usefulness,注意 list group没有放在panel-body中哦。

The sample code is as follows:

<!-- panel与 list group结合起来-->
      <div class="row">
        <div class="panel panel-danger">
          <div class="panel-heading">
            <h3 class="panel-title"> academy</h3>
          </div>
          <div class="panel-body">
            <p> young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes young lady of the program爱 program apes</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>

以上呢就是 Bootstrap 组件 of全部内容啦,Bootstrap of设计是很有规律 of呢,多看多 usefulness,自然就可以记住啦。

Bootstrap Series.

Bootstrap Learning Documentation (I)

Bootstrap learning documentation (II)

Bootstrap Learning Documentation (III)

Bootstrap Learning Documentation (IV)


Recommended>>
1、Demystified How a female doctor leads the mysterious agency DARPA in the United States
2、The power of metadata in Natural Framework
3、PLSQLgtfunction
4、TypeScript dynamically creates classes
5、Jack Ma talks to entrepreneurs I dont like artificial intelligence Machines should do what humans cant do

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号