Bootstarp学习教程（13）其他相关组件(1)

来源：互联网发布：c语言入门经典电子版编辑：程序博客网时间：2024/05/21 20:24

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

默认分页：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>

0 0

Bootstarp学习教程（13） 其他相关组件(1)

Bootstarp学习教程（13）其他相关组件(1)