bootstrap学习之起步与导航

最新推荐文章于 2023-04-13 17:56:59 发布

卡西莫多的礼物

最新推荐文章于 2023-04-13 17:56:59 发布

阅读量161

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/qq_35696312/article/details/83658743

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

bootstrap是一个非常有名的基于jquery的前端框架，我们可以通过CDN来直接引用，但是在引用bootstrap的js之前需要先引人jquery，如下所示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Test</title>
    <!-- jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>

通过这样简单的配置，我们就可以使用bootstrap的内容了，bootstrap提供了一些css的样式，提供了一些常用的组件以及一些jquery的插件，这三部分内容可以赋予网页非常简洁，美观和实用的特点。接下来对一些常用的组件和样式进行介绍：

下拉菜单

使用下拉菜单的方式非常简单，只需要给一个a标签或者button添加一个data-toggle='dropdown'即可使得这个按钮具有下来菜单的属性，然后使用ul来列出菜单，ul需要添加dropdown-menu来标识，否则下拉菜单将不会隐藏。我们来看一个例子：


                                    <li class='dropdown'>
                                        <a href="#" class='dropdown-toggle' data-toggle="dropdown" role='button' aria-haspopup="true" aria-expanded="false">Dropdown <span class='caret'></span></a>
                                        <ul class='dropdown-menu'>
                                            <li><a href="#">Item1</a></li>
                                            <li><a href="#">Item2</a></li>
                                            <li><a href="#">Item3</a></li>
                                            <li role='separator' class='divider'></li>
                                            <li><a href="#">Item4</a></li>
                                        </ul>
                                    </li>
                                </ul>

完成后的样子就变成了这样：

导航与导航条

导航主要是以nav开头的class类，nav navbar-nav类 nav nav-tabs类 nav nav-pills类这三种指定导航的样式分别为普通，tab样式以及胶囊样式三种，而nav-stacked可以使得导航纵向排列，通过赋予ul上述属性，即可实现各种导航的样式。

而导航条则是在导航的外面加了一些div和nav，最外层是一个具有navbar navbar-default类的nav标签，然后是可以选择性的添加一个container-fluid属性的div来让导航栏铺满整个页面，然后是一个具有navbar-header的div和一个具有collapse navbar-collapse的div来包裹导航内容，导航内容可以有之前的ul，或者是表单内容和下拉菜单，表达内容需要添加一个navbar-form的属性，在这个里面我们可以通过navbar-left和navbar-right来调整导航内容的位置，让其靠左或者靠右。让我们来总结一下

bootstrap导航相关属性介绍
nav	导航的基类
nav-tabs	tab样式的导航
nav-pills	胶囊样式的导航
navbar-nav	普通样式
nav-stacked	纵向排列
navbar navbar-default	导航条属性
navbar-header	导航条logo
collapse navbar-collpase	可以折叠的导航
navbar-left navbar-right	调整导航元素在导航条的位置

如下图分别是nav-tabs，nav-pills和navbar-nav三种导航样式

我们可以给nav nav-pills的胶囊导航添加一个list-group并给每一个导航元素<li>添加一个 list-group-item来实现一个更好看的侧边栏导航，如下图所示：

这是给胶囊导航添加了一个列表组的样式，但是需要注意的是nav-tabs是不建议这样做的，会很难看(亲测难看)

卡西莫多的礼物

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap学习之起步与导航

bootstrap是一个非常有名的基于jquery的前端框架，我们可以通过CDN来直接引用，但是在引用bootstrap的js之前需要先引人jquery，如下所示&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="
复制链接

扫一扫

专栏目录