Bootstarp学习教程(12) 导航组件

亦凉 2023-10-16 19:11 110阅读 0赞



Center导航:Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分。改变修饰类可以改变样式。

标签页:注意.nav-tabs类需要.nav基类。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Demo</title>
  5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6. <meta http-equiv="description" content="this is my page">
  7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  10. <link rel="stylesheet" href="css/bootstrap.min.css">
  11. <!-- 可选的Bootstrap主题文件(一般不用引入) -->
  12. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  13. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  14. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  15. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16. <script src="js/bootstrap.min.js"></script>
  17. </head>
  18. <body>
  19. <br/>
  20. <div class="container">
  21. <div class="row"></div>
  22. <ul class="nav nav-tabs">
  23. <li class="active"><a href="#">Home</a>
  24. </li>
  25. <li><a href="#">Profile</a>
  26. </li>
  27. <li><a href="#">Messages</a>
  28. </li>
  29. </ul>
  30. </div>
  31. </body>
  32. </html>

Center 1

胶囊式标签页:

  1. <body>
  2. <br/>
  3. <div class="container">
  4. <div class="row"></div>
  5. <ul class="nav nav nav-pills">
  6. <li class="active"><a href="#">主页</a>
  7. </li>
  8. <li><a href="#">简介</a>
  9. </li>
  10. <li><a href="#">信息</a>
  11. </li>
  12. </ul>
  13. </div>
  14. </body>

Center

两端对齐的导航:在大于768px的屏幕上,通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。

注意:(Safari 和响应式两端对齐导航:Safari有一个bug:对于两端对齐的导航,水平改变浏览器大小将引起绘制错误。此bug可以在justified nav example页面得到重现。)

  1. <body>
  2. <br/>
  3. <div class="container">
  4. <div class="row"></div>
  5. <ul class="nav nav-pills nav-justified">
  6. <li class="active"><a href="#">主页</a>
  7. </li>
  8. <li><a href="#">简介</a>
  9. </li>
  10. <li><a href="#">信息</a>
  11. </li>
  12. </ul>
  13. </div>
  14. </body>

Center 2

禁用的链接:对任何导航(包括标签页,pills,或列表,加入.disabled使链接为灰色且没有鼠标悬停效果

发表评论

表情:
评论列表 (有 0 条评论,110人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Bootstarp4 导航

    1:水平导航 如果你想创建一个简单的水平导航栏,可以在 <ul> 元素上添加 .nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .n