Bootstrap 布局组件（上篇）

前言

本篇文章继续进行Bootstrap知识的更新，这次Bootstrap布局组件的知识，主要的内容是按钮，进度条，分页，列表，下拉菜单，导航，导航栏。

一、按钮

1 .代码如下（如下所示）：

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

			<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>
			<button type="button" class="btn btn-outline-primary">带边框的基本按钮</button>
			
			
			<button disabled >禁止點擊</button>
			<button class = "btn btn-block btn-outline-primary" id  = "btn">块级按钮</button>
			<button class = "btn btn-lg btn-outline-success">大按钮</button>
			<button class = "btn btn-sm btn-outline-info">小按钮</button>
			
		</div>

        <script>
			$(function(){
   
				$('#btn').click(function(){
   
					console.log($('button:disabled'))
					$('button:disabled').removeAttr("disabled") ;
					//$('button:disabled').addClass("active") ;
				}) ;
			})
			
		</script>

2.结果展示：

二、分页

1.概念：

分页：是一种无序列表，Bootstrap像处理其它界面元素一样处理分页。

1.分页(Pagination)

处理分页的class	描述
.pagination	添加该class来在页面上显示分页，默认的分页
.disabled, .active	可以自定义链接，通过使用.disabled来定义不可点击的链接，通过使用.active来指示当前的页面, 分页的状态
.pagination-lg, .pagination-sm	使用这些 class 来获取不同大小的项,分页的大小

2.翻页（Pager）

想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况，链接是居中显示。

翻页的class	描述
.pager	添加该class来获得翻页链接
.previous, .next	使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐
.disabled	添加该 class 来设置对应按钮禁止使用。

2、代码如下（示例）：

	<div class="container">
			<ul class="pagination">
				<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
				<li class="page-item"><a class="page-link" href="#">1</a>