Web前端 — Bootstrap（8）

本次知识点：

1.分页

2.标签

3.徽章

4.巨幕

5.页头

6.缩略图

7.警告框

1.分页

（1）默认的分页

      <ul class="pagination">
          <li><a href="">«</a></li>
          <li><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">»</a></li>
      </ul>

（2）禁用和激活的状态

      <ul class="pagination">
          <li class="disabled"><a href="">«</a></li>
          <li class="active"><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">»</a></li>
      </ul>

（3）分页的尺寸

pagination-lg 、 pagination-sm

<ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
</ul>

<ul class="pagination pagination-sm">
<li><a href="#">«</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
</ul>

（4）翻页

Pager

      <ul class="pager">
          <li><a href="">previous</a></li>
          <li><a href="">next</a></li>
      </ul>

（5）对齐的链接

      <ul class="pager">
          <li class="previous"><a href="">← previous</a></li>
          <li class="next"><a href="">next →</a></li>
      </ul>

（6）可选的禁用状态

      <ul class="pager">
          <li class="previous disabled"><a href="">← previous</a></li>
          <li class="next"><a href="">next →</a></li>
      </ul>

2.标签

   <span class="label label-default">Default</span>
   <span class="label label-primary">Primary</span>
   <span class="label label-success">Success</span>
   <span class="label label-info">Info</span>
   <span class="label label-warning">Warning</span>
   <span class="label label-danger">Danger</span>

3.徽章

badge

   <a href="">Messages <span class="badge">20</span></a>
   <button class="btn btn-default">Messages <span class="badge">20</span></button>

4.巨幕

jumbotron

   <div class="jumbotron">
       <div class="container">
           <h1>hello world!!!</h1>
           <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
               content or information.</p>
           <p><a class="btn btn-primary" href="">Learn more</a></p>
       </div>
   </div>

5.页头

page-header

   <div class="page-header">
       <h1>Example page header
           <small>Subtext for header</small>
       </h1>
   </div>

6.缩略图

（1）默认样式

   <div class="col-md-3 col-sm-6">
       <a class="thumbnail" href="">
           <img src="images/kittens.jpg" alt=""/>
       </a>
   </div>

（2）自定义内容

   <div class="col-md-3 col-sm-6">
       <div class="thumbnail">
           <img src="images/kittens.jpg" alt=""/>
           <div class="caption">  <!--text-center-->
               <h3>缩略图标签</h3>
               <p>一些示例文本。一些示例文本。</p>
               <p>
                   <a href="#" class="btn btn-primary" role="button">按钮</a>
                   <a href="#" class="btn btn-default" role="button">按钮 </a>
               </p>
           </div>
       </div>
   </div>

7.警告框

（1）基本默认样式

      <div class="alert alert-success">成功！很好地完成了提交。</div>
      <div class="alert alert-info">信息！请注意这个信息。</div>
      <div class="alert alert-warning">警告！请不要提交。</div>
      <div class="alert alert-danger">错误！请进行一些更改。</div>

（2）可关闭的警告框

      <button type="button" class="close" data-dismiss="alert">×</button>

（3）警告中的链接

      <div class="alert alert-success">
          <a href="#" class="alert-link">成功！很好地完成了提交。</a>
      </div>

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/80483052

本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！

Web前端 — Bootstrap（8）

猜你喜欢