简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > bootstrap常用组件样式使用之，导航，列表，按钮
Blogger Information
Blog 34
fans 0
comment 0
visits 20279
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
bootstrap常用组件样式使用之，导航，列表，按钮
小庄
Original
572 people have browsed it

bootstrap常用组件样式使用之，导航，列表，按钮

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  8.     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  9.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  10.     <title>Document</title>
  11. </head>
  12. <body>
  13.     <!-- 1、bootstrap 排版  -->
  14.     <div class="container">
  15.         <table class="table text-center">
  16.             <thead>
  17.                 <tr> 
  18.                     <td class="active">姓名</td>
  19.                     <td class="success">姓名</td>
  20.                     <td class="warning">年龄</td>
  21.                     <td class="danger">地址</td>
  22.                     <td class="info">国籍</td>
  23.                 </tr>
  24.             </thead>
  25.             <tr>
  26.                 <td class="active">0001</td>
  27.                 <td class="success">张三丰</td>
  28.                 <td class="warning">100</td>
  29.                 <td class="danger">河南</td>
  30.                 <td class="info">中国</td>
  31.             </tr>
  32.             <tr>
  33.                 <td class="active">0002</td>
  34.                 <td class="success">斯大林</td>
  35.                 <td class="warning">100</td>
  36.                 <td class="danger">未知</td>
  37.                 <td class="info">苏联</td>
  38.             </tr>
  39.             <tr>
  40.                 <td class="active">0003</td>
  41.                 <td class="success">林肯</td>
  42.                 <td class="warning">100</td>
  43.                 <td class="danger">未知</td>
  44.                 <td class="info">米国</td>
  45.             </tr>
  46.         </table>
  47.     </div>
  48.     <hr>
  49.     <!-- 2、bootstrap 按钮  -->
  50.     <div class="container text-center">
  51.         <button type="button" class="btn btn-default">默认样式</button>
  53.         <button type="button" class="btn btn-primary">首选项</button>
  55.         <button type="button" class="btn btn-success">成功</button>
  57.         <button type="button" class="btn btn-info">一般信息</button>
  59.         <button type="button" class="btn btn-warning">警告</button>
  61.         <button type="button" class="btn btn-danger">危险</button>
  63.         <button type="button" class="btn btn-link">链接</button>
  64.     </div>
  65.     <hr>
  66.     <!-- 3、bootstrap 列表  -->
  67.     <div class="container text-center">
  68.         ul 列表
  69.         <ul class="list-group">
  70.             <li class="list-group-item list-group-item-success">哈哈哈哈</li>
  71.             <li class="list-group-item list-group-item-info">呵呵呵呵</li>
  72.             <li class="list-group-item list-group-item-warning">呼呼呼呼</li>
  73.             <li class="list-group-item list-group-item-danger">哗哗哗哗</li>
  74.           </ul>
  75.           <div class="list-group">
  76.               选中变色ul列表
  77.             <a href="#" class="list-group-item list-group-item-success">你大爷还是你大爷</a>
  78.             <a href="#" class="list-group-item list-group-item-info">你大哥还是你大哥</a>
  79.             <a href="#" class="list-group-item list-group-item-warning">你大舅还是你大舅</a>
  80.             <a href="#" class="list-group-item list-group-item-danger">你大姐还是你大姐</a>
  81.           </div>
  82.     </div>
  83.     <hr>
  84.     <!-- 4、bootstrap 导航 -->
  86.         <nav class="navbar navbar-default">
  87.             <div class="container-fluid">
  88.               <!-- Brand and toggle get grouped for better mobile display -->
  89.               <div class="navbar-header">
  90.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  91.                   <span class="sr-only">Toggle navigation</span>
  92.                   <span class="icon-bar"></span>
  93.                   <span class="icon-bar"></span>
  94.                   <span class="icon-bar"></span>
  95.                 </button>
  96.                 <a class="navbar-brand" href="#">Brand</a>
  97.               </div>
  98.               <!-- Collect the nav links, forms, and other content for toggling -->
  99.               <div class="collapse navbar-collapse">
  100.                 <ul class="nav navbar-nav">
  101.                   <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
  102.                   <li><a href="#">Link</a></li>
  103.                 </ul>
  104.                 <ul class="nav navbar-nav navbar-right">
  105.                   <li><a href="#">Link</a></li>
  106.                   <li class="dropdown">
  107.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  108.                     <ul class="dropdown-menu">
  109.                       <li><a href="#">Action</a></li>
  110.                       <li><a href="#">Another action</a></li>
  111.                       <li><a href="#">Something else here</a></li>
  112.                       <li role="separator" class="divider"></li>
  113.                       <li><a href="#">Separated link</a></li>
  114.                     </ul>
  115.                   </li>
  116.                 </ul>
  117.               </div><!-- /.navbar-collapse -->
  118.             </div><!-- /.container-fluid -->
  119.           </nav>
  121.           <!-- 路劲导航 -->
  122.         <ol class="breadcrumb">
  123.             <li><a href="#">Home</a></li>
  124.             <li><a href="#">Library</a></li>
  125.             <li class="active">Data</li>
  126.         </ol>
  128. </body>
  129. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！