Bootstrap基础入门(第三篇)

清疚 2022-05-30 11:58 355阅读 0赞

# Bootstrap基础入门(三) #

**一、Bootstrap选项卡**

1.  头部导航

*  基类：nav
 *  修饰类：

(1)  nav-tabs

![20180312100240266][]

nav-justified:内容两端对齐

![20180312100401649][]

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

![20180312100507664][]

(2) nav-pills：胶囊式

![20180312100641589][]

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

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

![20180312103400186][]

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

![20180312103617648][]

**    **2.内容部分

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

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

*  淡入淡出效果

fade:淡出

in:当前淡入

*  鼠标移入切换

实现方法：利用js实现

元素.tab("show")

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

**二、Bootstrap导航条**

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

![20180312104549662][]

*   深色调样式类：navbar-inverse

![20180312104652612][]

*  导航条里面菜单类名：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">
        
        
        <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>
            
            <button class="btn btn-primary navbar-btn">按钮</button>
            
            <a href="https://www.baidu.com" class="navbar-link">链接到百度</a>
            
            <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>
            
            <ul class="nav navbar-nav navbar-right">
                <li class="active">
                    <a href="#">关于</a>
                </li>
                <li>
                    <a href="#">我的</a>
                </li>
            </ul>
        </div>
    </div>

运行结果：

![20180312105948243][]

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

例： 
    <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>

运行结果：

![2018031211101185][]

*  响应式导航条

（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>

留着给你们自己运行吧。![大笑][laugh.gif]

今天就分享到这里了，拜拜~~~(下篇继续分享Bootstrap基础入门(第四篇))

[20180312100240266]: /images/20220530/e889944c28f44febb7207ec3d84d8438.png
[20180312100401649]: /images/20220530/7c2ce8125cbd446d8c6f46943eaff607.png
[20180312100507664]: /images/20220530/74502dc4d26b4a25972ea3e04786287f.png
[20180312100641589]: /images/20220530/652eaa670c6e4fca9d2665dadc270c62.png
[20180312103400186]: /images/20220530/fc91b0c44df64682a9ebee8254e84a90.png
[20180312103617648]: /images/20220530/1f0ffa4a1d7d47dbbfe1d105b73a3727.png
[20180312104549662]: /images/20220530/7fec26ba933341debb6289141f782f7c.png
[20180312104652612]: /images/20220530/33cc8f634cb44e51b04b5feed24d7c73.png
[20180312105948243]: /images/20220530/28ee1d0fac0d47dc8481d354220ba828.png
[2018031211101185]: /images/20220530/f72e1402ab8d42548246ccae9e6cf551.png
[laugh.gif]: /images/20220530/76952096e64c4b5a88829cae38a22e1e.png