使用Bootstrap制作导航栏

最新推荐文章于 2024-04-21 13:20:27 发布

匆匆似客

最新推荐文章于 2024-04-21 13:20:27 发布

阅读量985

点赞数 3

分类专栏： Bootstrap学习文章标签： bootstrap javascript 前端

本文链接：https://blog.csdn.net/m0_64962002/article/details/130751271

版权

Bootstrap学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1:Bootstrap框架中导航栏右两种类型，分别是标签页类型和胶囊类型

2:举例

(1):标签页类型的基本代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <!-- 核心css文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <!-- JQuery文件 -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- 最新的bootstrap核心javascript文件 -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>

<body>
    <ul class=" nav nav-tabs">
        <li><a href="#">导航栏1</a></li>
        <li class="active"><a href="#">导航栏2</a></li>
        <li><a href="#">导航栏3</a></li>
    </ul>
</body>

</html>

(2):标签页类型的运行结果

(3):胶囊导航栏的基本代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <!-- 核心css文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <!-- JQuery文件 -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- 最新的bootstrap核心javascript文件 -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>

<body>
    <ul class=" nav nav-pills">
        <li><a href="#">导航栏1</a></li>
        <li class="active"><a href="#">导航栏2</a></li>
        <li><a href="#">导航栏3</a></li>
    </ul>
</body>

</html>

(4):胶囊导航栏的截图

3:导航栏的位置(左对齐pull-left和右对齐pull-right)

(1):左对齐的基本代码

 <ul class=" nav nav-pills pull-left">
        <li><a href="#">导航栏1</a></li>
        <li class="active"><a href="#">导航栏2</a></li>
        <li><a href="#">导航栏3</a></li>
 </ul>

(2):左对齐的运行结果截图

(3):右对齐的基本代码

<ul class=" nav nav-pills pull-right">
        <li><a href="#">导航栏1</a></li>
        <li class="active"><a href="#">导航栏2</a></li>
        <li><a href="#">导航栏3</a></li>
</ul>

(4):右对齐的运行结果截图

注意:导航栏的位置默认是左对齐

匆匆似客

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
使用Bootstrap制作导航栏

3:导航栏的位置(左对齐pull-left和右对齐pull-right)1:Bootstrap框架中导航栏右两种类型，分别是。(2):标签页类型的运行结果。(3):胶囊导航栏的基本代码。(2):左对齐的运行结果截图。(4):右对齐的运行结果截图。(4):胶囊导航栏的截图。(3):右对齐的基本代码。(1):左对齐的基本代码。注意:导航栏的位置默认是左对齐。
复制链接

扫一扫