Bootstrap基础入门(第三篇)

最新推荐文章于 2020-03-31 19:52:15 发布

a_Keri

最新推荐文章于 2020-03-31 19:52:15 发布

阅读量897

点赞数 6

分类专栏： Bootstrap 文章标签： Bootstrap

本文链接：https://blog.youkuaiyun.com/a_Keri/article/details/79523189

版权

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Bootstrap的基础知识，包括选项卡的使用，如nav-justified、nav-pills和nav-stacked等类的应用，以及内容部分的tab-content和tab-pane的设置。还详细讲解了Bootstrap导航条的各种样式，如navbar-default、navbar-inverse，以及导航条的固定定位、添加logo、浮动菜单、按钮和链接等。最后提到了响应式导航条的实现方法，包括navbar-toggle和navbar-collapse的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap基础入门(三)

一、Bootstrap选项卡

头部导航

基类：nav
修饰类：

(1) nav-tabs

nav-justified:内容两端对齐

nav-tabs-justified:下面的线实现两端对齐

(2) nav-pills：胶囊式

说明：也可以设置nav-justified实现两端对齐自适应父级宽度。

nav-stacked:在垂直方向堆叠排列

(3)结合下拉菜单的头部

2.内容部分

内容部分添加类名tab-content
内容每一项添加类tab-pane使每一项隐藏，使当前项显示需要添加active
切换处理

①头部切换：给每个a标签添加data-toggle=”tab”;
②内容切换：通过锚点（href对应内容的id名）

淡入淡出效果

fade:淡出

in:当前淡入

<div class="container">
    <ul class="nav nav-tabs nav-tabs-justified">
        <li class="active"><a href="#a" data-toggle="tab">SVN</a></li>
        <li><a href="#b" data-toggle="tab">iOS</a></li>
        <li><a href="#c" data-toggle="tab">VB.Net</a></li>
        <li><a href="#d" data-toggle="tab">Java</a></li>
    </ul>
    <ul class="tab-content">
        <!--tab-pane所有的都隐藏-->
        <!--active当前的显示-->
        <!--fade淡出-->
        <!--in淡入显示-->
        <li class="tab-pane active fade in" id="a">SVN</li>
        <li class="tab-pane fade" id="b">iOS</li>
        <li class="tab-pane fade" id="c">VB.Net</li>
        <li class="tab-pane fade" id="d">Java</li>
    </ul>

</div>

鼠标移入切换

实现方法：利用js实现

元素.tab("show")

//鼠标移入实现切换效果： 
$(".nav-tabs a").mouseover(function(){
        $(this).tab("show");
    })

二、Bootstrap导航条

基类：navbar
默认样式类：navbar-default

深色调样式类：navbar-inverse

导航条里面菜单类名：nav navbar-nav
去掉导航条两端的圆角样式：navbar-static-top
导航条固定定位到头部：navbar-fixed-top
导航条固定定位到底部：navbar-fixed-buttom
导航条添加logo:navbar-brand
logo标签的父级元素：navbar-header
导航菜单的浮动：navbar-left(左浮动) navbar-right(右浮动)
导航条添加按钮：navbar-btn
导航条添加链接：navbar-link
导航条添加文字：navbar-text
导航条添加表单：form表单添加navbar-form

//导航
<div class="navbar navbar-inverse navbar-static-top">
    <!--带logo的导航navbar-brand-->
    <!--logo标签的父级元素 navbar-header-->
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-brand">logo</div>
        </div>
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="#">11111</a>
            </li>
            <li>
                <a href="#">22222</a>
            </li>
            <li>
                <a href="#">33333</a>
            </li>
        </ul>
        <!--带按钮的导航条  navbar-btn-->
        <button class="btn btn-primary navbar-btn">按钮</button>
        <!--导航里面的链接navbar-link-->
        <a href="https://www.baidu.com" class="navbar-link">链接到百度</a>
        <!--navbar-text导航里面的文字-->
        <p class="navbar-text">导航里面的文字</p>
        <!--导航里面表单-->
        <form action="" class="navbar-form navbar-left">
            <div class="form-group">
                <input type="text" class="form-control">
                <input type="submit" class="form-control">
            </div>
        </form>
        <!--导航右浮动navbar-right-->
        <ul class="nav navbar-nav navbar-right">
            <li class="active">
                <a href="#">关于</a>
            </li>
            <li>
                <a href="#">我的</a>
            </li>
        </ul>
    </div>
</div>

运行结果：

带下拉菜单的导航条：直接在有下拉菜单那项设置下拉菜单组件

例： 
<ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown">
                    Themes
                    <span class="caret"></span>//添加小三角
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">WrapBootstrap</a></li>
                    <li><a href="#">Sign in</a></li>
                    <li><a href="#">signup</a></li>
                    <li><a href="#">Bootstrapwatch</a></li>
               </ul>
            </li>
</ul>

运行结果：

响应式导航条

            （1）添加按钮跟logo同级：navbar-toggle
         横线设置：icon-bar
            （2）隐藏的元素的设置
         ①给需要在小分辨率下隐藏的元素添加一个父级
         ②给该父级设置：collapse navbar-collapse
            （3）点击按钮让菜单展示
        给按钮添加 data-toggle=”collapse” data-target=”对应元素的选择器”

例：
<div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-brand">logo</div>
            <div class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </div>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="javascript:">111</a></li>
                <li><a href="javascript:">222</a></li>
                <li><a href="javascript:">333</a></li>
            </ul>
            <form action="" class="navbar-form navbar-right">
                <div class="form-group">
                    <input class="form-control" type="text">
                    <input class="form-control" type="submit">
                </div>
            </form>
        </div>
    </div>

</div>

留着给你们自己运行吧。