Bootstrap 实例

Bootstrap 实例

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

下拉菜单

<div class="dropdown">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Dropdown button
	</button>
	<div class="dropdown-menu">
		<a href="#" class="dropdown-item">link1</a>
		<a href="#" class="dropdown-item">lik2</a>
		<a href="#" class="dropdown-item">link3</a>
	</div>
	</div>

手风琴

  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          选项一
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          #1 内容： 我是一只小小白
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        选项二
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          #2 内容：我是一只小小白
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          选项三
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          #3 内容：我是一只小小白
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<br>

动态选项卡切换

<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>
 <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>

胶囊选项卡切换

<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
   <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>

单选下拉菜单

<div class="container">
	<form action="">
		<label for="sell">单选下拉菜单：
		</label>
		<select name="" id="sell" class="from-control">
			<option value="">1</option>
			<option value="">2</option>
			<option value="">3</option>
			<option value="">4</option>
			<option value="">5</option>
		</select>
	</form>
	</div>

表单

	<div class="container">
		<form action="">
			<div class="form-group">
				<label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
			</div>
			<div class="form-group">
				<label for="psd">Password:</label>
				<input type="Password" class="form-control" id="psd" placeholder="Enter passworc">
			</div>
			<div class="form-check">
				<label for="form-check-label">
					<input class="form-check-input" type="checkbox">Remember me
				</label>
			</div>
			<button type="submit" class="btn btn-primary"> submi</button>
    </form>
  </div>

轮播图

<div id="demo" class="carousel slide" data-ride="carousel">
     <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
   <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1486788877,378582319&fm=26&gp=0.jpg">
      <div class="carousel-caption">
        <h3>第一张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1486788877,378582319&fm=26&gp=0.jpg">
      <div class="carousel-caption">
        <h3>第二张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1486788877,378582319&fm=26&gp=0.jpg">
      <div class="carousel-caption">
        <h3>第三张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
  </div>
 <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 </div>

模态框实例

<div class="container">
	<h2>模态框实例</h2>
	<!-- 按钮：用于打开模态框 -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击</button>
	<!-- 模态框 -->
	<div class="modal fade" id="myModal">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
      <h4 class="modal-title">
       要恢复页面吗？
     </h4>
     <button type="button" class="close" data-dismiss="modal">&times;</button>
   </div>
   <div class="modal-body" >Chrome 未正确关闭。</div>
   <div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">恢复</button>
    <button type="button" class="btn btn-light" data-dismiss="modal">打开启动项</button>
  </div>
</div>
</div> </div>
</div>

提示框实录

<div class="container">
	<h3>提示框实录</h3>
	<a href="#" data-toggle="tooltip" data-placement="top" title="百度一下，你就知道 
	https://www.baidu.com/index.html">百度一下，你就知道</a>
	<script>
		$(document).ready(function(){
			$('[data-toggle="tooltip"]').tooltip();
		});
	</script>
</div>
<br><br>
<div class="conotainer">
	<h3>弹出框实例</h3>
	<a href="#" data-toggle="popover"  
	data-placement="top" title="警告" data-content="含有非法信息">点击
</a>
<script>
	$(document).ready(function(){
		$('[data-toggle = "popover"]').popover();
	});
</script>
</div>

行内Flex

<div class="container mt-3">
	<h2>行内Flex</h2>
	<div class="d-inline-flex p-3 bg-secondary text-white">
		<div class="p-2 bg-info">Flex item1</div>
		<div class="p-2 bg-warning">Flex item2</div>
		<div class="p-2 bg-primary">Flex item3</div>
	</div>
</div>
</div>
<br><br>

鼠标悬停状态表格

<div class="container">
	<h2>鼠标悬停状态表格</h2>
	<table class="table table-hover">
		<thead>
			<tr>
				<th>FirstName</th>
				<th>LastName</th>
				<th>Emaili</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John</td>
				<td>Doe</td>
				<td>John@139.comq</td>
			</tr>
			<tr>
				<td>John</td>
				<td>Doe</td>
				<td>John@139.comq</td>
			</tr>
			<tr>
				<td>John</td>
				<td>Doe</td>
				<td>John@139.comq</td>
			</tr>
		</tbody>
	</table>
</div>

进度条文本标签

<div class="container">
	<h2>进度条文本标签</h2>
	<div class="progress">
		<div class="progress-bar" style="width: 70%">70%</div>
	</div>
</div>

当前页页码状态

<div class="container">
	<h2>当前页页码状态</h2>
	<ul class="pagination">
		<li class="page-item"><a href="#" class="page-link">Previous</a></li>
		<li class="page-item"><a href="#" class="page-link">1</a></li>
		<li class="page-item active"><a href="#" class="page-link">2</a></li>
		<li class="page-item"><a href="#" class="page-link">Next</a></li>
	</ul>
</div>