http://www.runoob.com/bootstrap4/bootstrap4-navs.html

共五个部分

1

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width,initial-scall=1,shrink-to-fit=no">

	<title>bootstrap入门2</title>

	<link rel="stylesheet" type="text/css" href="../../bootstrap-4.0.0-dist/css/bootstrap.css">

	<script type="text/javascript" src="../../jquery-3.3.1/jquery-3.3.1.js"></script>

		<script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/popper.js"></script>

	<script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/bootstrap.js"></script>

</head>

<body>

	<div class="container">

		<h1>前端你好</h1>

		<p>bootstrap你好</p>

	<h1>分列</h1>

	<div class="row" style="background-color:#ffd;">

		<div class="col-sm-4" style="background-color:#eaf;">

			<div class="container">

				<h1>11111</h1>

				<h2>222</h2>

				<h3>333</h3>

				<h4>4444</h4>

				<h5>55555</h5>

				<h6>666666</h6>

			</div>

		</div>

		<div class="col-sm-4" style="background-color:#1e6;">

			<div class="container">

				<h1><small>small style</small></h1>

				<mark>this is a mark </mark>

				<h3 class="display-2">display-2</h3>

				<h4 class="display-3">display-3</h4>

			</div></div>

		<div class="col-sm-4" style="background-color:#eee;"><div class="container">

				<h1>11111</h1>

				<h2>222</h2>

				<h3>333</h3>

				<h4>4444</h4>

				<h5>55555</h5>

				<h6>666666</h6>

				<abbr title="java EE is  "> java ee</abbr>

				<h2>this is blockquote</h2>

				<blockquote class="blockquote">

					<p>

					 	For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally

					 	50年来，wwf一直保护这自然环境。作为世界领先的动物保护组织，来自美国有120万会员，以及全球有将近500万的人为WWF工作。

					</p>

					<footer class="bolockquote-footer">from www'website</footer>

				</blockquote>

			</div></div>

	<div class="row">

		<div class="col-sm-3">

			<h2>代表指定意义的文本颜色</h2>

			  <p class="text-muted">柔和的文本。</p>

			  <p class="text-primary">重要的文本。</p>

			  <p class="text-success">执行成功的文本。</p>

			  <p class="text-info">代表一些提示信息的文本。</p>

			  <p class="text-warning">警告文本。</p>

			  <p class="text-danger">危险操作文本。</p>

			  <p class="text-secondary">副标题。</p>

			  <p class="text-dark">深灰色文字。</p>

			  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>

			  <p class="text-white">白色文本（白色背景上看不清楚）。</p>

		</div>

		<div class="col-sm-3">

			 <h2>背景颜色</h2>

			  <p class="bg-primary text-white">重要的背景颜色。</p>

			  <p class="bg-success text-white">执行成功背景颜色。</p>

			  <p class="bg-info text-white">信息提示背景颜色。</p>

			  <p class="bg-warning text-white">警告背景颜色</p>

			  <p class="bg-danger text-white">危险背景颜色。</p>

			  <p class="bg-secondary text-white">副标题背景颜色。</p>

			  <p class="bg-dark text-white">深灰背景颜色。</p>

			  <p class="bg-light text-dark">浅灰背景颜色。</p>

		</div>

		<div class="col-sm-3"><table class="table">

			<thead>

				<tr>

					<th>学号</th>

					<th>姓名</th>

					<th>年龄</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td>1</td>

					<td>zhsgsdf</td>

					<td>9</td>

				</tr>

				<tr>

					<td>2</td>

					<td>sdfdsf</td>

					<td>10</td>

				</tr>

			</tbody></table>

			<table class="table table-bordered">

			<thead>

				<tr>

					<th>学号</th>

					<th>姓名</th>

					<th>年龄</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td>1</td>

					<td>sdfssdf</td>

					<td>9</td>

				</tr>

				<tr>

					<td>2</td>

					<td>sdfsdf</td>

					<td>10</td>

				</tr>

			</tbody></table></div>

		<div class="col-sm-3">

			<table class="table table-dark table-hover">

				<thead>

					<tr>

						<th>工号</th>

						<th>姓名</th>

						<th>职位</th>

					</tr>

				</thead>

				<tbody>

					<tr>

						<td>1</td>

						<td>发电费水费sdfsd</td>

						<td>training</td>

					</tr>

					<tr>

						<td>2</td>

						<td>马云</td>

						<td>trade</td>

					</tr>

					<tr>

						<td>3</td>

						<td>小主</td>

						<td>String</td>

					</tr>

				</tbody>

			</table>

			<table class="table table-striped">

				<thead class="thead-light">

					<tr>

						<th>工号</th>

						<th>姓名</th>

						<th>职位</th>

					</tr>

				</thead>

				<tbody>

					<tr>

						<td>1</td>

						<td>骚薛</td>

						<td>training</td>

					</tr>

					<tr>

						<td>2</td>

						<td>马云</td>

						<td>trade</td>

					</tr>

					<tr>

						<td>3</td>

						<td>小主</td>

						<td>String</td>

					</tr>

				</tbody>

			</table>

		</div>

	</div>

		<div class="row">

			<div class="col">

			<table class="table table-bordered table-sm">

		    <thead>

		      <tr>

		        <th>Firstname</th>

		        <th>Lastname</th>

		        <th>Email</th>

		      </tr>

		    </thead>

		    <tbody>

		      <tr>

		        <td>John</td>

		        <td>Doe</td>

		        <td>john@example.com</td>

		      </tr>

		      <tr>

		        <td>Mary</td>

		        <td>Moe</td>

		        <td>mary@example.com</td>

		      </tr>

		      <tr>

		        <td>July</td>

		        <td>Dooley</td>

		        <td>july@example.com</td>

		      </tr>

		    </tbody>

			</table>

			</div>

			<div class="col">

				<div class="table-responsive">

				<table class="table">

			    <thead>

			      <tr>

			        <th>#</th>

			        <th>Firstname</th>

			        <th>Lastname</th>

			        <th>Age</th>

			        <th>City</th>

			        <th>Country</th>

			        <th>Sex</th>

			        <th>Example</th>

			        <th>Example</th>

			        <th>Example</th>

			        <th>Example</th>

			      </tr>

			    </thead>

			    <tbody>

			      <tr>

			        <td>1</td>

			        <td>Anna</td>

			        <td>Pitt</td>

			        <td>35</td>

			        <td>New York</td>

			        <td>USA</td>

			        <td>Female</td>

			        <td>Yes</td>

			        <td>Yes</td>

			        <td>Yes</td>

			        <td>Yes</td>

			      </tr>

			    </tbody>

			</table></div>

			</div>

		</div>

	</div>

		<table class="table table-hover">

	    <thead>

	      <tr>

	        <th>Firstname</th>

	        <th>Lastname</th>

	        <th>Email</th>

	      </tr>

	    </thead>

	    <tbody>

	      <tr>

	        <td>John</td>

	        <td>Doe</td>

	        <td>john@example.com</td>

	      </tr>

	      <tr>

	        <td>Mary</td>

	        <td>Moe</td>

	        <td>mary@example.com</td>

	      </tr>

	      <tr>

	        <td>July</td>

	        <td>Dooley</td>

	        <td>july@example.com</td>

	      </tr>

	    </tbody>

		</table>

		<table class="table">

    <thead>

      <tr>

        <th>Firstname</th>

        <th>Lastname</th>

        <th>Email</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Default</td>

        <td>Defaultson</td>

        <td>def@somemail.com</td>

      </tr>

      <tr class="table-primary">

        <td>Primary</td>

        <td>Joe</td>

        <td>joe@example.com</td>

      </tr>

      <tr class="table-success">

        <td>Success</td>

        <td>Doe</td>

        <td>john@example.com</td>

      </tr>

      <tr class="table-danger">

        <td>Danger</td>

        <td>Moe</td>

        <td>mary@example.com</td>

      </tr>

      <tr class="table-info">

        <td>Info</td>

        <td>Dooley</td>

        <td>july@example.com</td>

      </tr>

      <tr class="table-warning">

        <td>Warning</td>

        <td>Refs</td>

        <td>bo@example.com</td>

      </tr>

      <tr class="table-active">

        <td>Active</td>

        <td>Activeson</td>

        <td>act@example.com</td>

      </tr>

      <tr class="table-secondary">

        <td>Secondary</td>

        <td>Secondson</td>

        <td>sec@example.com</td>

      </tr>

      <tr class="table-light">

        <td>Light</td>

        <td>Angie</td>

        <td>angie@example.com</td>

      </tr>

      <tr class="table-dark text-dark">

        <td>Dark</td>

        <td>Bo</td>

        <td>bo@example.com</td>

      </tr>

	    </tbody>

	</table>

	</div>

	<div class="container">

		<h1>图片样式例子</h1>

		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3891993913,4222748050&fm=27&gp=0.jpg" class="rounded" alt="圆角图片">

		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3891993913,4222748050&fm=27&gp=0.jpg" class="rounded-circle" alt="rounded-circle">

		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3891993913,4222748050&fm=27&gp=0.jpg" class="img-thumbnail" alt="thumbnail">

		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3891993913,4222748050&fm=27&gp=0.jpg" class="img-fluid" alt="thumbnail">

	</div>

</body>

</html>

2

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width,initial-scall=1,shrink-to-fit=no">

	<title>bootstrap入门</title>

	<link rel="stylesheet" type="text/css" href="../../bootstrap-4.0.0-dist/css/bootstrap.css">

	<script type="text/javascript" src="../../jquery-3.3.1/jquery-3.3.1.js"></script>

	<script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/popper.js"></script>

	<script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/bootstrap.js"></script>

</head>

<body>

<div class="container">

		<h1>前端你好</h1>

		<p>bootstrap你好</p>

		<div class="jumbotron">

			<h1>jumbotron</h1>

			<p>超大屏幕，有啥卵用？</p>

		</div>

	<div class="alert alert-success">

	 <button type="button" class="close" data-dismiss="alert">&times;</button>

	 <strong>成功！</strong></div>

	<h4>Bootstrap4 按钮</h4>

	<div class="container">

		<button type="button" class="btn">基本按钮</button>

		<button type="button" class="btn btn-primary">主要按钮</button>

		<button type="button" class="btn btn-secondary">次要按钮</button>

		<button type="button" class="btn btn-success">成功</button>

		<button type="button" class="btn btn-info">信息</button>

		<button type="button" class="btn btn-warning">警告</button>

		<button type="button" class="btn btn-danger">危险</button>

		<button type="button" class="btn btn-dark">黑色</button>

		<button type="button" class="btn btn-light">浅色</button>

		<button type="button" class="btn btn-link">链接</button>

	</div>

	<h4>按钮类可用于 	a, button, 或 input 元素上:</h4>

	<div class="container">

		<a href="#" class="btn btn-info" role="button">链接按钮</a>

		<button type="button" class="btn btn-info">按钮</button>

		<input type="button" class="btn btn-info" value="输入框按钮">

		<input type="submit" class="btn btn-info" value="提交按钮">

	</div>

	<h4>按钮设置边框</h4>

	<div class="container">

		<button type="button" class="btn btn-outline-primary">主要按钮</button>

		<button type="button" class="btn btn-outline-secondary">次要按钮</button>

		<button type="button" class="btn btn-outline-success">成功</button>

		<button type="button" class="btn btn-outline-info">信息</button>

		<button type="button" class="btn btn-outline-warning">警告</button>

		<button type="button" class="btn btn-outline-danger">危险</button>

		<button type="button" class="btn btn-outline-dark">黑色</button>

		<button type="button" class="btn btn-outline-light text-dark">浅色</button>

	</div>

	<h4>不同大小的按钮</h4>

	<div class="container">

		<button type="button" class="btn btn-primary btn-lg">大号按钮</button>

		<button type="button" class="btn btn-primary">默认按钮</button>

		<button type="button" class="btn btn-primary btn-sm">小号按钮</button>

	</div>

	<h4>块级按钮</h4>

	<div class="container">

		<button type="button" class="btn btn-primary btn-block">按钮 1</button>

	</div>

	<h4>激活和禁用的按钮</h4>

	<div class="container">

		<button type="button" class="btn btn-primary active">点击后的按钮</button>

		<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>

		<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>

	</div>

	<h2>Bootstrap4 按钮组</h2>

	<div class="container">

	<h4>水平按钮组</h4>

		<div class="btn-group">

		  <button type="button" class="btn btn-primary">Apple</button>

		  <button type="button" class="btn btn-primary">Samsung</button>

		  <button type="button" class="btn btn-primary">Sony</button>

		</div>

	<h4>垂直按钮组</h4>

		<div class="btn-group-vertical">

		  <button type="button" class="btn btn-primary">Apple</button>

		  <button type="button" class="btn btn-primary">Samsung</button>

		  <button type="button" class="btn btn-primary">Sony</button>

		</div>

	<h4>内嵌按钮组 | 下拉菜单</h4>

	<div class="container">

		<div class="btn-group">

		  <button type="button" class="btn btn-primary">Apple</button>

		  <button type="button" class="btn btn-primary">Samsung</button>

		  <div class="btn-group">

		    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

		       Sony

		    </button>

		    <div class="dropdown-menu">

		      <a class="dropdown-item" href="#">Tablet</a>

		      <a class="dropdown-item" href="#">Smartphone</a>

		    </div>

		  </div>

		</div></div>

	<h4>垂直按钮组及下拉菜单</h4>

	<div class="container">

		<div class="btn-group-vertical">

		  <button type="button" class="btn btn-primary">Apple</button>

		  <button type="button" class="btn btn-primary">Samsung</button>

		  <div class="btn-group">

		    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

		       Sony

		    </button>

		    <div class="dropdown-menu">

		      <a class="dropdown-item" href="#">Tablet</a>

		      <a class="dropdown-item" href="#">Smartphone</a>

		    </div>

		  </div>

		</div></div>

	<h2>Bootstrap4 徽章（Badges)</h2>

	<h6>测试标题<span class="badge badge-success">New</span></h6>

	<h6>测试标题<span class="badge badge-secondary">New</span></h6>

	<h6>测试标题<span class="badge badge-dark">New</span></h6>

	<h5>测试标题<span class="badge badge-primary">New</span></h5>

	<h4>测试标题<span class="badge badge-danger">New</span></h4>

	<h3>测试标题<span class="badge badge-warning">New</span></h3>

	<h2>测试标题<span class="badge badge-info">New</span></h2>

	<h1>测试标题<span class="badge badge-light">New</span></h1>

	<h4>药丸型徽章</h4>

	<span class="badge badge-pill badge-default">默认</span>

	<span class="badge badge-pill badge-primary">主要</span>

	<span class="badge badge-pill badge-success">成功</span>

	<span class="badge badge-pill badge-info">信息</span>

	<span class="badge badge-pill badge-warning">警告</span>

	<span class="badge badge-pill badge-danger">危险</span>

	</div>

	<h4>徽章嵌入元素</h4>

	<button type="button" class="btn btn-primary">

	  Messages <span class="badge badge-success">4</span>

	</button>

</div>

</body>

</html>

3

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width,initial-scall=1,shrink-to-fit=no">

	<title>bootstrap入门3</title>

	<link rel="stylesheet" type="text/css" href="../../bootstrap-4.0.0-dist/css/bootstrap.css">

	<script type="text/javascript" src="../../jquery-3.3.1/jquery-3.3.1.js"></script>

	<script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/popper.js"></script>

	<script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/bootstrap.js"></script>

</head>

<body>

<div class="container">

	<h2>进度条</h2>

	<div class="progress">

	<div class="progress-bar bg-info" style="width:90%">90%</div>

	</div>

	<p></p>

	<div class="progress">

	<div class="progress-bar progress-bar-striped bg-warning"  style="width:60%"></div>

	</div>

	<p></p>

	<div class="progress">

	<div class="progress-bar" style="width:30%"></div>

	</div>

	<p></p>

	<div class="progress">

	<div class="progress-bar bg-success" style="width:10%">10%</div>

	</div>

	<p></p>

	<div class="progress">

	<div class="progress-bar  progress-bar-striped progress-bar-animated" style="width:30%">30%</div>

	</div>

	<p></p>

	<div class="progress">

	<div class="progress-bar bg-danger " style="width:60%"></div>

	</div>

	<p></p>

	<div class="progress">

	<div class="progress-bar" style="width:90%"></div>

	</div>

	<p></p>

	<div class="progress">

	  <div class="progress-bar bg-success" style="width:40%">

	    Free Space

	  </div>

	  <div class="progress-bar bg-warning" style="width:10%">

	    Warning

	  </div>

	  <div class="progress-bar bg-danger" style="width:20%">

	    Danger

	  </div>

	</div>

	<h2>分页</h2>

	<ul class="pagination pagination-sm">

	  <li class="page-item"><a class="page-link" href="#">上一页</a></li>

	  <li class="page-item"><a class="page-link" href="#">1</a></li>

	  <li class="page-item active"><a class="page-link" href="#">2</a></li>

	  <li class="page-item"><a class="page-link" href="#">3</a></li>

	  <li class="page-item"><a class="page-link" href="#">4</a></li>

	  <li class="page-item"><a class="page-link" href="#">5</a></li>

	  <li class="page-item"><a class="page-link" href="#">下一页</a></li>

	</ul>

	<h4>面包屑导航</h4>

	<ul class="breadcrumb breadcrumb-">

	  <li class="breadcrumb-item"><a href="#">Photos</a></li>

	  <li class="breadcrumb-item active"><a href="#">Summer 2017</a></li>

	  <li class="breadcrumb-item"><a href="#">Italy</a></li>

	  <li class="breadcrumb-item ">Rome</li>

	</ul>

	<h2>Bootstrap4 列表组</h2>

	<ul class="list-group">

		<li class="list-group-item">what </li>

		<li class="list-group-item">is</li>

		<li class="list-group-item"> the</li>

		<li class="list-group-item active">f u c k</li>

	</ul>

	<h4>链接多种颜色列表项</h4>

	<div class="list-group">

		<a href="#" class="list-group-item list-group-item-success">success</a>

		<a href="#" class="list-group-item list-group-item-primary">主要</a>

		<a href="#" class="list-group-item list-group-item-secondary">次要</a>

		<a href="#" class="list-group-item list-group-item-error">err</a>

		<a href="#" class="list-group-item list-group-item-info">提示颜色</a>

		<a href="#" class="list-group-item list-group-item-warning">警告色</a>

		<a href="#" class="list-group-item list-group-item-dark">深色</a>

		<a href="#" class="list-group-item list-group-item-light">高亮light</a>

		<a href="#" class="list-group-item list-group-item-danger">重要提示</a>

		<a href="#" class="list-group-item active ">选定项</a>

	</div>

	<h2>Bootstrap 卡片 Card</h2>

	<div class="card  text-gray bg-danger">

		<div class="card-head">

			这里是卡片头部

		</div>

		<div class="card-body bg-info">

			<h5 class="card-title">标题标题啊</h5>

			<p class="card-text">正文内容内容内容啊啊啊啊abcdefghijklmopqrstuvwxyzABCDEFGHIJKLMOPQRSTUVWXYZ,./!#@#$%^&*()_+`~！@#￥%……&*（）《》《》。，啊啊啊abcdefghijklmopqrstuvwxyzABCDEFGHIJKLMOPQRS内容啊啊啊啊abcdefghijklmopqrstuvwxyzABCDEFGHIJKLMOPQRSTUVWXYZ,./!#@#$%^&*()_+`~！@#￥%……&*（）《》《》。，啊啊啊abcdefghijklmopqrstuvwxyzABCDEFGHI</p>

			<a href="#" class="card-link">Card-link????</a>

		</div>

		<div class="card-footer bg-warning "><a href="#" class="card-link">More...</a></div>

	</div>

</div>

</body>

</html>

4



<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width,initial-scall=1,shrink-to-fit=no">

	<title>bootstrap入门4</title>

	<link rel="stylesheet" type="text/css" href="../../bootstrap-4.0.0-dist/css/bootstrap.css">

	<script type="text/javascript" src="../../jquery-3.3.1/jquery-3.3.1.js"></script>

	<script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/popper.js"></script>

	<script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/bootstrap.js"></script>

</head>

<body>

<div class="container">

	<h2>菜单与导航</h2>

	<div class="dropdown ">

		<button class="btn btn-primary dropdown-toggle " data-toggle="dropdown">下拉菜单</button>

		<div class="dropdown-menu dropdown-menu">

			<a href="#" class="dropdown-item">选项1</a>

			<div class="dropdown-divider">分割线？</div>

			<a href="#" class="dropdown-item">选项2</a>

			<a href="#" class="dropdown-item">选项3</a>

			<div class="dropdown-header">菜单项间标题</div>

			<a href="#" class="dropdown-item disabled">选项4</a>

			<a href="#" class="dropdown-item active">选项5</a>

		</div>

	</div>

	<h4>按钮中下拉菜单</h4>

	<div class="btn-group">

	  <button type="button" class="btn btn-primary">Sony</button>

	  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">

	    <span class="caret"></span>

	  </button>

	  <div class="dropdown-menu">

	    <a class="dropdown-item" href="#">Tablet</a>

	    <a class="dropdown-item" href="#">Smartphone</a>

	  </div>

	</div>

	<h4>折叠</h4>

	<a href="#demo" data-target="#demo" data-toggle="collapse">一周看点</a>

	<div id="demo" class="collapse show">

		<p>一周新知道一周新知道一周新知道一周新知道一周新知道一周新知道一周新知道<br>会计法但是廖嗲看风景水电费老师看的放假</p>

	</div>

	<h4>卡片实现手风琴效果</h4>

	<div id="parentt">

		<div class="card">

			<div class="card-header">

				<a href="#context1" class="card-link" data-toggle="collapse" data-parent="#parentt">一天内</a>

			</div>

			<div id="context1" class="collapse show">

				<div class="card-body">一天看点一天看点一天看点一天看点一天看点</div>

			</div>

		</div>

		<div class="card">

			<div class="card-header">

				<a href="#context2" class="collapsed card-link" data-toggle="collapse" data-parent="#parentt">一周内</a>

			</div>

			<div id="context2" class="collapse">

				<div class="card-body">一周看点一周看点一周看点一周看点一周看点</div>

			</div>

		</div>

		<div class="card">

			<div class="card-header ">

				<a href="#context3" class="collapsed card-link" data-toggle="collapse" data-parent="#parentt">一月内</a>

			</div>

			<div id="context3" class="collapse">

				<div class="card-body">一月看点一月看点一月看点一月看点一月看点</div>

			</div>

		</div>

	</div>

	<h2>Bootstrap4 导航</h2>

	<h4>默认</h4>

	<ul class="nav">

	  <li class="nav-item">

	    <a class="nav-link" href="#">Link</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link" href="#">Link</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link" href="#">Link</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link disabled" href="#">Disabled</a>

	  </li>

	</ul>

	<h4>居中</h4>

	<ul class="nav justify-content-center">

	  <li class="nav-item">

	    <a class="nav-link" href="#">Link</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link" href="#">Link</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link" href="#">Link</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link disabled" href="#">Disabled</a>

	  </li>

	</ul>

	<h4>靠右</h4>

	<ul class="nav justify-content-end">

	  <li class="nav-item">

	    <a class="nav-link" href="#">Link</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link" href="#">Link</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link" href="#">Link</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link disabled" href="#">Disabled</a>

	  </li>

	</ul>

	<h4>选项卡</h4>

	<ul class="nav justify-content-center nav-tabs ">

	  <li class="nav-item ">

	    <a class="nav-link  active" href="#">Link</a>

	  </li>

	  <li class="nav-item ">

	    <a class="nav-link " href="#">Link</a>

	  </li>

	  <li class="nav-item ">

	    <a class="nav-link " href="#">Link</a>

	  </li>

	  <li class="nav-item ">

	    <a class="nav-link  disabled" href="#">Disabled</a>

	  </li>

	</ul>

	<ul class="nav justify-content-center nav-tabs ">

	  <li class="nav-item dropdown">

	    <a class="nav-link  active dropdown-toggle" data-toggle="dropdown" href="#">more</a>

	    <div class="dropdown-menu">

			<a href="#" class="dropdown-item">item</a>

			<a href="#" class="dropdown-item">item</a>

			<a href="#" class="dropdown-item">item</a>

			<a href="#" class="dropdown-item">item</a>

			<a href="#" class="dropdown-item">item</a>

	    </div>

	  </li>

	  <li class="nav-item ">

	    <a class="nav-link " href="#">Link</a>

	  </li>

	  <li class="nav-item ">

	    <a class="nav-link " href="#">Link</a>

	  </li>

	  <li class="nav-item ">

	    <a class="nav-link  disabled" href="#">Disabled</a>

	  </li>

	</ul>

	<ul class="nav justify-content-center nav-pills ">

	  <li class="nav-item ">

	    <a class="nav-link  active" href="#">Link</a>

	  </li>

	  <li class="nav-item ">

	    <a class="nav-link " href="#">Link</a>

	  </li>

	  <li class="nav-item ">

	    <a class="nav-link " href="#">Link</a>

	  </li>

	  <li class="nav-item ">

	    <a class="nav-link  disabled" href="#">Disabled</a>

	  </li>

	</ul>

	<ul class="nav justify-content-center nav-pills">

	  <li class="nav-item">

	    <a class="nav-link active" href="#">Active</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>

	    </div>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link" href="#">Link</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link disabled" href="#">Disabled</a>

	  </li>

	</ul>

	<!-- Nav pills -->

	<ul class="nav nav-pills justify-content-center">

	  <li class="nav-item">

	    <a class="nav-link active" data-toggle="pill" href="#home">Home</a>

	  </li>

	  <li class="nav-item">

	    <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>

	  </li>

	  <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 class="tab-pane active container" id="home">123123123123</div>

	  <div class="tab-pane fade container" id="menu1">.发爽肤水东方闪电.</div>

	  <div class="tab-pane container" id="menu2">.FSDFSDFSDF.</div>

	</div>

	<p>

	<p><p><p><p></p></p></p></p></p>

	<h2>Bootstrap4 导航栏</h2>

	<!-- 小屏幕上水平导航栏会切换为垂直的 -->

	<nav class="navbar navbar-expand-sm bg-light">

	  <!-- Links -->

	  <ul class="navbar-nav">

	    <li class="nav-item">

	      <a class="nav-link" href="#">Link 1</a>

	    </li>

	    <li class="nav-item">

	      <a class="nav-link" href="#">Link 2</a>

	    </li>

	    <li class="nav-item">

	      <a class="nav-link" href="#">Link 3</a>

	    </li>

	  </ul>

	</nav>

	<!-- 灰底黑字 -->

	<nav class="navbar navbar-expand-sm bg-light navbar-light">

	  <ul class="navbar-nav">

	    <li class="nav-item active">

	      <a class="nav-link" href="#">Active</a>

	    </li>

	    <li class="nav-item">

	      <a class="nav-link" href="#">Link</a>

	    </li>

	    <li class="nav-item">

	      <a class="nav-link" href="#">Link</a>

	    </li>

	    <li class="nav-item">

	      <a class="nav-link disabled" href="#">Disabled</a>

	    </li>

	  </ul>

	</nav>

	<!-- 黑底白字 -->

	<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

	<!-- 蓝底白字 -->

	<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

	<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

	  <a class="navbar-brand" href="#">Logo</a>

	  ...

	</nav>

	<p>小屏幕 折叠导航栏</p>

	<nav class="navbar navbar-expand-md bg-dark navbar-dark">

	  <!-- Brand -->

	  <a class="navbar-brand" href="#">Navbar</a>

	  <!-- Toggler/collapsibe Button -->

	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

	    <span class="navbar-toggler-icon"></span>

	  </button>

	  <!-- Navbar links -->

	  <div class="collapse navbar-collapse" id="collapsibleNavbar">

	    <ul class="navbar-nav">

	      <li class="nav-item">

	        <a class="nav-link" href="#">Link</a>

	      </li>

	      <li class="nav-item">

	        <a class="nav-link" href="#">Link</a>

	      </li>

	      <li class="nav-item">

	        <a class="nav-link" href="#">Link</a>

	      </li>

	    </ul>

	  </div>

	</nav>

	<p>下拉导航栏</p>

	<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

	  <!-- Brand -->

	  <a class="navbar-brand" href="#">Logo</a>

	  <!-- Links -->

	  <ul class="navbar-nav">

	    <li class="nav-item">

	      <a class="nav-link" href="#">Link 1</a>

	    </li>

	    <li class="nav-item">

	      <a class="nav-link" href="#">Link 2</a>

	    </li>

	    <!-- Dropdown -->

	    <li class="nav-item dropdown">

	      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

	        Dropdown link

	      </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>

	      </div>

	    </li>

	  </ul>

	</nav>

	<p>导航栏标签</p>

	<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

	  <form class="form-inline">

		<div class="input-group">

	      <span class="input-group-addon">@</span>

	      <input type="text" class="form-control" placeholder="Username">

	    </div>

	    <input class="form-control" type="text" placeholder="Search">

	    <button class="btn btn-success" type="submit">Search</button>

	  </form>

	</nav>

	<p>导航栏文本</p>

	<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

	<!-- Links -->

	  <ul class="navbar-nav">

	    <li class="nav-item">

	      <a class="nav-link" href="#">Link 1</a>

	    </li>

	    <li class="nav-item">

	      <a class="nav-link" href="#">Link 2</a>

	    </li>

	  </ul>

	  <!-- Navbar text-->

	  <span class="navbar-text">

	    Navbar text

	  </span>

	</nav>

	<p>固定导航栏</p>

	<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

	  顶部

	</nav>

	<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">

	  底部

	</nav>

</div>

</body>

</html>

5

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width,initial-scall=1,shrink-to-fit=no">

	<title>bootstrap入门5</title>

	<link rel="stylesheet" type="text/css" href="../../bootstrap-4.0.0-dist/css/bootstrap.css">

	<script type="text/javascript" src="../../jquery-3.3.1/jquery-3.3.1.js"></script>

	<script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/popper.js"></script>

	<script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/bootstrap.js"></script>

</head>

<body>

<div class="container">

	<h2>表单</h2>

	<p>垂直表单</p>

	<form class=" mx-auto">

	  <div class="form-group">

	    <label for="email">Email address:</label>

	    <input type="email" class="form-control" id="email">

	  </div>

	  <div class="form-group">

	    <label for="pwd">Password:</label>

	    <input type="password" class="form-control" id="pwd">

	  </div>

	  <div class="form-check  mx-auto" >

	    <label class="form-check-label">

	      <input class="form-check-input" type="checkbox"> Remember me

	    </label>

	  </div>

	  <button type="submit" class="btn btn-primary">Submit</button>

	</form>

	<p>内联表单</p>

	<form class="form-inline">

	  <label for="email">Email address:</label>

	  <input type="email" class="form-control" id="email">

	  <label for="pwd">Password:</label>

	  <input type="password" class="form-control" id="pwd">

	  <div class="form-check">

	    <label class="form-check-label">

	      <input class="form-check-input" type="checkbox"> Remember me

	    </label>

	  </div>

	  <button type="submit" class="btn btn-primary">Submit</button>

	</form>

	<p>表单控件</p>

	<form action="">

		<div class="form-group mx-auto">

			<label for="text">账号</label>

			<input type="text" class="form-control">

			<label for="text">密码</label>

			<input type="password" class="form-control">

			<label for="comment">评论:</label>

  			<textarea class="form-control" rows="5" id="comment"></textarea>

			<div class="form-check form-check-inline">

			<label class="form-check-label ">

			    <input type="checkbox" class="form-check-input" value="" disabled>其他人保密

			  </label>

			</div>

			<div class="form-check form-check-inline">

			  <label class="form-check-label">

			    <input type="checkbox" class="form-check-input" value="">自己可见

			  </label>

			</div>

			<div class="form-check disabled form-check-inline">

			  <label class="form-check-label">

			    <input type="checkbox" class="form-check-input" value="" disabled>公开

			  </label>

			</div>

			<div class="radio radio-inline">

			  <label><input type="radio" name="optradio">Option 1</label>

			</div>

			<div class="radio radio-inline">

			  <label><input type="radio" name="optradio">Option 2</label>

			</div>

			<div class="radio disabled radio-inline">

			  <label><input type="radio" name="optradio" disabled>Option 3</label>

			</div>

			<label for="sel1">下拉菜单:</label>

			 <select class="form-control" id="sel1">

			    <option>1</option>

			    <option>2</option>

			    <option>3</option>

			    <option>4</option>

			 </select>

			<button type="submit" class="btn btn-primary">提交</button>

		</div>

	</form>

	<h2>轮播</h2>

	<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://static.runoob.com/images/mix/img_fjords_wide.jpg">

	       <div class="carousel-caption">

		    <h3>第一张图片描述标题</h3>

		    <p>描述文字!</p>

		  </div>

	    </div>

	    <div class="carousel-item">

	      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">

	    </div>

	    <div class="carousel-item">

	      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">

	    </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>

	<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 modal-sm">

	    <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">

	        模态框内容..

	      </div>

	      <!-- 模态框底部 -->

	      <div class="modal-footer">

	        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

	      </div>

	    </div>

	  </div>

	</div>

	<p></p>

	<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>

	<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>

</div>

</body>

</html>

Bootstrap4 入门的更多相关文章

  1. Bootstrap4入门

    基础样式 颜色 文字颜色以.text-*开头 背景颜色.bg-* primary / seconday / success / danger / warning / info / muted / wh ...

  2. bootstrap4简单使用和入门02-bootstrap的js组件简单使用

    自带默认的css和js弹框控制 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. bootstrap4简单使用和入门01-简单表单的使用

    基本表单页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. bootstrap4简单使用和入门03-响应式布局

    响应式布局的原理 页面源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. Bootstrap4从入门到精通视频教程

    一.布局 0.课件1.Bootstrap介绍_栅格系统2.禁用响应式_响应式分界点 二.内容 3.排版_代码4.图片_图片框5.表格 三.公共样式 6.边框_浮动7.颜色_Display显示属性8.文 ...

  6. JavaScript 从入门到放弃（二）模块化工具requirejs

    入门教程: 1.JS模块化工具requirejs教程(一):初识requirejs 2.JS模块化工具requirejs教程(二):基本知识 描述 这几天在使用github最活跃的基于bootstra ...

  7. vue入门demo：用户管理3

    该入门demo是使用组件的方式实现,不涉及向后端发送请求 说明 把用户列表和添加用户拆分为两个组件,用户列表数据在父组件 获取用户列表:用户列表组件获取父组件的用户列表(父组件向子组件传值)1-1 1 ...

  8. 要web开发精品教程吗？免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放

    要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

  9. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

随机推荐

  1. 快速克隆网站利器-teleport ultra

    快速克隆网站利器-teleport ultra 一.下载 二.操作步骤 第一步:打开这个软件 第二步点击file.下拉选择 New Project Wizred,弹出如下下拉框 这里我们使用第一个或者 ...

  2. 基于Docker + Consul + Nginx + Consul-Template的服务负载均衡实现(转)

    转:https://www.jianshu.com/p/fa41434d444a 前言 上一篇文章使用 Consul 和 Registrator 在 docker 的容器环境中搭建了服务注册和发现集群 ...

  3. 解决Wireshark安装Npcap组件失败

    解决Wireshark安装Npcap组件失败   从Wireshark 3.0开始,Npcap取代Winpcap组件,成为Wireshark默认的网卡核心驱动.由于该组件属于驱动程序,所以安装时候容易 ...

  4. linux下apache安装ssl步骤

    制作证书: 参考:linux下运用opensll制作ssl证书 生成三个证书 server.crt .server-ca.crt.server.key 安装openssl tar -xzvf open ...

  5. typeScript模块<二>

    /*模块 1 模块的的概念 2 模块导出的几种方法 1.export 导出声明 2.export 导出语句 3.export default 4.import导入模块 3 模块化封装上一讲的DB库 * ...

  6. Jmeter 时间函数工具汇总

    在使用Jmeter过程中,常使用的函数汇总 __time : 获取时间戳.格式化时间 ${__time(yyyy-MM-dd HH:mm:ss:SSS,time)}  :格式化生成时间格式 2018- ...

  7. linux非root用户安装ncurses-devel依赖

    很明显,如果我们通过yum或rpm下载安装,始终无法绕开root用户,除非我们不用yum或rpm.嗯,我们直接用源码安装.下载源码包,到http://ftp.gnu.org/gnu/ncurses/我 ...

  8. 【html】css、js实现网页内容禁止选中

    网页内容不能选中.复制应该如何实现呢? 通过css *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none ...

  9. Docker容器（三）——容器端口映射

    (1).容器端口映射 容器的端口映射用到了-p选项,-p [物理机端口]:[容器实例端口] 让centos:httpd运行在后台 [root@youxi1 ~]# docker run -d -p 8 ...

  10. MyBatis-Spring项目

    使用Spring IoC可以有效管理各类Java资源,达到即插即拔功能:通过AOP框架,数据库事务可以委托给Spring处理,消除很大一部分的事务代码,配合MyBatis的高灵活.可配置.可优化SQL ...