bootstrap学习:案例-标签页

是个动图：所以需要用到js插件模块的标签页

 

		<!-- 标签页 -->
		<div class="container">

			<!-- Nav tabs -->
			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
						data-toggle="tab">Chrome</a></li>
				<li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
						data-toggle="tab">Firefox</a></li>
				<li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
						data-toggle="tab">Safari</a></li>
				<li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
						data-toggle="tab">Opear</a></li>
				<li role="presentation"><a href="#hosx" aria-controls="settings" role="tab" data-toggle="tab">IE</a>
				</li>
			</ul>

			<!-- Tab panes -->
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active" id="home">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-5">
								<img src="../../img/谷歌.jpg" alt="">
							</div>
							<div class="col-md-7">
								111111Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium, ratione.
							</div>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="profile">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-5">
								<img src="../../img/火狐.jpg" alt="">
							</div>
							<div class="col-md-7">
							222222	Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium, ratione.
							</div>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="messages">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-5">
								<img src="../../img/Safari.jpg" alt="">
							</div>
							<div class="col-md-7">
								33333333Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium, ratione.
							</div>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="settings">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-5">
								<img src="../../img/Opear.jpg" alt="">
							</div>
							<div class="col-md-7">
								44444444Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium, ratione.
							</div>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="hosx">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-5">
								<img src="../../img/IE.jpg" alt="">
							</div>
							<div class="col-md-7">
								55555Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium, ratione.
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>

 版权部分

		<!-- 版权 -->
		<div class="container">
			<p class="text-right">
				&copy; 2022 xxx
			</p>
		</div>