1. 使用图标的导航栏
使用导航栏样式:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- My Test Bootstrap
- </title>
- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/CSS/bootstrap.min.css">
- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">
- </script>
- <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
- </script>
- </head>
- <body>
- <nav class="navbar navbar-default" role="navigation">
- <div class="container-fluid">
- <div class="navbar-header">
- <a class="navbar-brand" href="#">
- Test Bootstrap
- </a>
- </div>
- <ul class="nav navbar-nav navbar-right">
- <li>
- <a href="#">
- <span class="glyphicon glyphicon-user">
- </span>
- 注册
- </a>
- </li>
- <li>
- <a href="#">
- <span class="glyphicon glyphicon-log-in">
- </span>
- 登录
- </a>
- </li>
- </ul>
- </div>
- </nav>
- </body>
- </HTML>
View Code
样式效果:
2. 分页 (Pagination): 是一种无序列表, Bootstrap 像处理其他界面元素一样处理分页.
使用分页样式:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- My Test Bootstrap
- </title>
- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">
- </script>
- <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
- </script>
- </head>
- <body>
- <ul class="pagination">
- <li>
- <a href="#">
- «
- </a>
- </li>
- <li class="active">
- <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="#">
- 6
- </a>
- </li>
- <li>
- <a href="#">
- »
- </a>
- </li>
- </ul>
- </body>
- </HTML>
View Code
样式效果:
3. 标签样式
使用样式:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- My Test Bootstrap
- </title>
- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">
- </script>
- <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
- </script>
- </head>
- <body>
- <span class="label label-default">
- 默认标签
- </span>
- <span class="label label-primary">
- 主要标签
- </span>
- <span class="label label-success">
- 成功标签
- </span>
- <span class="label label-info">
- 信息标签
- </span>
- <span class="label label-warning">
- 警告标签
- </span>
- <span class="label label-danger">
- 危险标签
- </span>
- </body>
- </HTML>
View Code
样式效果:
4. 徽章 (Badges): 主要用于突出显示新的或未读的项. 如需使用徽章, 只需要把 <span class="badge"> 添加到链接, Bootstrap 导航等这些元素上即可.
使用徽章样式:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- My Test Bootstrap
- </title>
- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">
- </script>
- <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
- </script>
- </head>
- <body>
- <ul class="nav nav-pills">
- <li class="active">
- <a href="#">
- 首页
- <span class="badge">
- 42
- </span>
- </a>
- </li>
- <li>
- <a href="#">
- 动态
- </a>
- </li>
- <li>
- <a href="#">
- 留言
- </a>
- </li>
- <li>
- <a href="#">
- 消息
- <span class="badge">
- 3
- </span>
- </a>
- </li>
- </ul>
- </body>
- </HTML>
View Code
样式效果:
来源: http://www.bubuko.com/infodetail-2881355.html