Bootstrap入门（十二）组件6：导航标签页

时间：2022-09-11 18:30:04
Bootstrap入门（十二）组件6：导航标签页
 
1.标签页
2.胶囊式标签页
3.垂直展示
4.两端对齐的标签页
5.禁用的链接
6.添加下拉菜单
 
先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加）
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>

<script src="bootstrap.min.js" type="text/javascript"></script>
 
1.标签页
要展示一个导航，基本的类就是nav
一个标签页会有很多选项，这就要用到<ul>标签
先展示一个基本的标签页
（class='active'用于使处于“被选择的状态”）
　　　　 <div class="container">

            <ul id="mytab" class="nav nav-tabs" role='tablist'>

                <li role='presentation' class='active'><a href="">HOME</a></li>

                <li role='presentation'><a href="">ASD</a></li>

                <li role='presentation'><a href="">SDF</a></li>

            </ul>

        </div>
效果：
Bootstrap入门（十二）组件6：导航标签页

鼠标移动到其他标签上面，会有效果

Bootstrap入门（十二）组件6：导航标签页

但是点击是没有反应的，这是因为是依赖于JS的一个插件的，来使用一下

（mytab是之前设置的的一个id，因为是id，所以要在前面使用#来索引，a指里面的<a>标签，“.click”式说当鼠标点击时，有一个事件，执行show）

　　　　　<script>

            $("#mytab a").click(function (e) {

                e.preventDefault();

                $(this).tab("show");

            })

        </script>

刷新，点击另一个标签，切换了

Bootstrap入门（十二）组件6：导航标签页

2.胶囊式标签页
胶囊式其实指得就是颜色不一样，只需要把class中的nav-tab改为nav-pills就可以了
　　　　 <div class="container">

            <ul id="mytab" class="nav nav-pills" role='tablist'>

                <li role='presentation' class='active'><a href="">HOME</a></li>

                <li role='presentation'><a href="">ASD</a></li>

                <li role='presentation'><a href="">SDF</a></li>

            </ul>

        </div>

执行，

Bootstrap入门（十二）组件6：导航标签页

点击其他标签，有同样的效果

Bootstrap入门（十二）组件6：导航标签页

3.垂直展示

除了水平展示，我们也可以垂直展示

只需要在class中添加一个nav-stacked属性就可以了

　　　　 <div class="container">

            <ul id="mytab" class="nav nav-pills nav-stacked" role='tablist'>

                <li role='presentation' class='active'><a href="">HOME</a></li>

                <li role='presentation'><a href="">ASD</a></li>

                <li role='presentation'><a href="">SDF</a></li>

            </ul>

        </div>

效果：

Bootstrap入门（十二）组件6：导航标签页

4.两端对齐的标签页
也就是全屏的效果，只需要向class中添加nav-justified属性就可以了
        <div class="container">

            <ul id="mytab" class="nav nav-pills nav-justified" role='tablist'>

                <li role='presentation' class='active'><a href="">HOME</a></li>

                <li role='presentation'><a href="">ASD</a></li>

                <li role='presentation'><a href="">SDF</a></li>

            </ul>

        </div>

效果：

Bootstrap入门（十二）组件6：导航标签页

5.禁用的链接
有时候不想某些标签被使用，只需要在相应的<li>标签上添加一个disabled的class就可以了
 
6.添加下拉菜单
比如在最后一个标签那里添加一个下拉菜单
需要的操作是，在相应的<li>标签添加一个class="dropdown"，然后在里面嵌套一个<ul><li>的组合就可以
　　　　<div class="container">

            <ul id="mytab" class="nav nav-pills nav-justified" role='tablist'>

                <li role='presentation' class='active'><a href="">HOME</a></li>

                <li role='presentation'><a href="">ASD</a></li>

                <li role='presentation' class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">

                        SDF

                        <span class="caret"></span>

                    </a>

                    <ul class="dropdown-menu" role="menu">

                        <li role="presentation"><a href="" role="menuitem" tabindex="-1">1</a></li>

                        <li role="presentation"><a href="" role="menuitem" tabindex="-1">2</a></li>

                        <li role="presentation"><a href="" role="menuitem" tabindex="-1">3</a></li>

                        <li role="presentation"><a href="" role="menuitem" tabindex="-1">4</a></li>

                        <li role="presentation"><a href="" role="menuitem" tabindex="-1">5</a></li>

                    </ul>

                </li>

            </ul>

        </div>

效果:

Bootstrap入门（十二）组件6：导航标签页

同样也可以运用到胶囊式当中，修改一些class即可

 
Bootstrap入门（十二）组件6：导航标签页
 
 
 
 
 

Bootstrap入门（十二）组件6：导航标签页的更多相关文章

  1. Bootstrap入门（二十二）组件16：列表组

    Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...

  2. Bootstrap入门（二十）组件14：警告框

    Bootstrap入门(二十)组件14:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3. ...

  3. Bootstrap入门（二十八）JS插件5：工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

  4. Bootstrap入门（二十九）JS插件6：弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  5. Bootstrap入门（二十七）JS插件4：标签页

    Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...

  6. Bootstrap入门（二十五）JS插件2：过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  7. Bootstrap入门（二十四）data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

  8. Bootstrap入门（二十一）组件15：警告框

    Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...

  9. Bootstrap &lt&semi;基础十八&gt&semi;面包屑导航（Breadcrumbs）

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

随机推荐

  1. Ubuntu 14&period;04中文输入法的安装

    Ubuntu默认自带的中文输入法是IBUS框架的ibus-pinyin,IBUS-Bopomofo等.对于习惯于搜狗,紫光华宇,谷歌拼音的我们可能有点使用不习惯.下面就是安装常用的IBUS中文输入法. ...

  2. TLV----Demo讲解

    接触过网络协议的人对TLV一定或多或少的知道.作为一种自定义应用层标准. TLV使用十分广泛.他对数据封包有着很好的定义,简单实用. TLV即Type-Length-Value.即我们每个封装成TLV ...

  3. IE8下实现兼容rgba

    昨天遇到一个问题,要实现一个背景透明的效果,用CSS3用rgba()就能实现,即 background: rgba(0,0,0,.5); 但是要兼容到IE8,就发现没有透明效果,因为IE8不支持rgb ...

  4. jmeter（二十六）生成HTML性能测试报告

    性能测试工具Jmeter由于其体积小.使用方便.学习成本低等原因,在现在的性能测试过程中,使用率越来越高,但其本身也有一定的缺点,比如提供的测试结果可视化做的很一般. 不过从3.0版本开始,jmete ...

  5. EasyUI datagrid formatter 属性

    easyui的formatter属性可以帮助我们更加灵活的显示数据库中的数据. 比如,我有一个启用禁用字段,使用数字表示,1表示启用,2表示禁用,展示给客户的时候我当然希望是中文的形式. 只需要写这么 ...

  6. C&num;为什么要多线程开发&lpar;一&rpar;

    首先说下多线程出现的原因: 为了解决负载均衡问题,充分利用CPU资源.为了提高CPU的使用率,采用多线程的方式去同时完成几件事情而不互相干扰.为了处理大量的IO操作时或处理的情况需要花费大量的时间等等 ...

  7. &lbrack;LeetCode&amp&semi;Python&rsqb; Problem 599&period; Minimum Index Sum of Two Lists

    Suppose Andy and Doris want to choose a restaurant for dinner, and they both have a list of favorite ...

  8. luogu4155&sol;bzoj4444 国旗计划 &lpar;倍增&rpar;

    成环,把每个区间变成两个然后展开成链 一个人的下一个人肯定是在彼此相交的基础上,右端点越大越好 于是就把它连到相交的.右端点最大的点上,连成一棵树 于是每次只要从某个节点开始,一直在树上跳到覆盖了一个 ...

  9. &lbrack;Fiddler&rsqb; The connection to &&num;39&semi;xxxxx&period;com&&num;39&semi; failed&period; &lt&semi;br &sol;&gt&semi;System&period;Security&period;SecurityException Failed to negotiate HTTPS connection with server&period;fiddler&period;network&period;https&amp&semi;gt&semi; HTTPS handshake to intelte

    最近利用模拟发get请求的时候出现: [Fiddler] The connection to ‘xxxxx.com' failed. <br />System.Security.Secur ...

  10. 加载 bean&period;xml 的几种方式 &lpar;java or web project&rpar;

    1. java project ApplicationContext ctx = new ClassPathXmlApplicationContext("classpath:bean1.xm ...

相关文章