Bootstarp学习教程(13) 其他相关组件(1)分析

阿里 阅读:200 2021-04-01 00:25:45 评论:0


分页:为您的网站或应用提供多页的分页组件,或是用更简单的翻页代替

默认分页:Rdio启发出了这个简单的分页,用在应用或搜索结果中超级棒。这个大块容易看见,容易缩放并有大块的点击区域。

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
	<br /> 
	<div class="container"> 
		<div class="row"> 
			<ul class="nav nav-pills nav-justified"> 
				<li class="active"><a href="#">主页</a> 
				</li> 
				<li><a href="#">简介</a> 
				</li> 
				<li><a href="#">信息</a> 
				</li> 
			</ul> 
		</div> 
		<div align="justify" class="col-md-4 col-md-offset-4"> 
			<ul class="pagination"> 
				<li><a href="#">«</a></li> 
				<li><a href="#">1</a></li> 
				<li><a href="#">2</a></li> 
				<li><a href="#">3</a></li> 
				<li><a href="#">4</a></li> 
				<li><a href="#">5</a></li> 
				<li><a href="#">»</a></li> 
			</ul> 
		</div> 
	</div> 
	<br /> 
 
</body> 
</html>

激活和禁用状态:链接在不同情况下可以定制。给不能点击的链接用.disabled 并且用.active显示是当前页

尺寸:加上.pagination-lg.pagination-sm吧。

大屏幕介绍:轻量,灵活的可选组件,扩展整个视角,展示您站点上的关键内容。要让大屏幕介绍是屏幕宽度,请别把它包括在.container

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
	<br /> 
	<div class="container"> 
		<div class="row"> 
			<ul class="nav nav-pills nav-justified "> 
				<li class="active"><a href="#">主页</a> 
				</li> 
				<li><a href="#">简介</a> 
				</li> 
				<li><a href="#">信息</a> 
				</li> 
			</ul> 
		</div> 
		 
	</div> 
	<br/> 
		<div class="jumbotron col-md-7 col-md-offset-2"> 
        <h1>Hello, world!</h1> 
        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> 
        <p><a class="btn btn-primary btn-lg">关于更多</a></p> 
        </div> 
 
</body> 
</html> 

如果需要让大屏幕介绍(jumbotron)占据全部宽度并且去掉圆角,只需将其放到所有.container外面,并在其内部添加一个.container

<div class="jumbotron"> 
  <div class="container"> 
    ... 
  </div> 
</div> 
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号