菜单

bootstrap组件的导航组件使用办法,bootstrap组件导航

2018年11月15日 - Bootstrap

1:Glyphicons 图标

此间注意的凡咱需要以boot下载的font文件夹包含在工程被才能够健康下

bootstrap组件的导航组件使用办法,bootstrap组件导航

在达到篇文章让大家介绍了bootstrap组件的以钮式下拉菜单小结,下面通过本文为大家介绍bootstrap导航组件的施用办法,一起看吧!

Bootstrap 中的领航组件都依靠与一个 .nav
类和ul,状态类为是公私的。改变修饰类可以变动样式。

1、标签页

.nav-tabs

图片 1

<ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a href="#">Home</a></li>
 <li role="presentation"><a href="#">Profile</a></li>
 <li role="presentation"><a href="#">Messages</a></li>
</ul>

2、胶囊式标签页

.nav-pills

图片 2

<ul class="nav nav-pills" role="tablist">
 <li role="presentation" class="active"><a href="#">Home</a></li>
 <li role="presentation"><a href="#">Profile</a></li>
 <li role="presentation"><a href="#">Messages</a></li>
</ul>

3、垂直的导航

只需要补加.nav-stacked就得兑现竖直方向上之导航

<ul class="nav nav-pills nav-stacked" role="tablist">
 ...
</ul>

4、禁用的链接

使需要禁用某个导航选项,只需要以对应之li上上加.disabled就好了

<ul class="nav nav-pills" role="tablist">
 ...
 <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
 ...
</ul>

5、给导航选项添加下拉菜单

如果需要导航的有选项是下拉菜单可以改对应的li

1)给li添加.dropdown

2)a标签当做下拉菜单的触发器,添加.dropdown-toggle 和
data-toggle=”dropdown”

3)a标签中添加文字与span

4)li里面还要添加ul,也便是dropdown-menu

<ul class="nav nav-tabs">
 ...
 <li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
   Dropdown 

  </a>
  <ul class="dropdown-menu">
   ...
  </ul>
 </li>
 ...
</ul>

上述所述是稍微编为大家介绍的bootstrap组件的导航组件使用方式,希望对大家有所助,如果大家来另问题请于我留言,小编会及时过来大家之。在这吧非常感谢大家对帮客之拙网站的支撑!

http://www.bkjia.com/Javascript/1189290.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1189290.htmlTechArticlebootstrap组件之导航组件使用方法,bootstrap组件导航
在达标篇稿子给大家介绍了bootstrap组件的本钮式下拉菜单小结,下面通过本文为大家介绍…

2:下拉组件

这边我们务必先下充斥组件文件bootstrap-dropdown.js才会健康的采用这功能

以身作则代码:

   <link rel="stylesheet"  >
    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>


      <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>

<div >
    <button type="button"  data-toggle="dropdown">
      测试
    </button>
    <ul  role="menu">
        <li><a  >Action</a></li>
        <li><a  >Another action</a></li>
        <li><a  >Something else here</a></li>
        <li ></li>
        <li><a  >Separated link</a></li>
    </ul>
</div>  

按钮组
本着按键进行分组管理

演示代码:

<div >
    <button type="button" >Left</button>
    <button type="button" >Middle</button>
    <button type="button" >Right</button>
</div>  

尺寸:

<div >
    <button type="button" >Left</button>
    <button type="button" >Middle</button>
    <button type="button" >Right</button>

</div>

<div >
    <button type="button" >Left</button>
    <button type="button" >Middle</button>
    <button type="button" >Right</button>
</div>  

垂直:

<div >
    <button type="button" >Left</button>
    <button type="button" >Middle</button>
    <button type="button" >Right</button>
</div>  

仅仅按钮下拉菜单:

<div >
  <button type="button"  data-toggle="dropdown">
    Action 
  </button>
  <ul  role="menu">
    <li><a  >Action</a></li>
    <li><a  >Another action</a></li>
    <li><a  >Something else here</a></li>
    <li ></li>
    <li><a  >Separated link</a></li>
  </ul>
</div>  

分裂式——注意在运用此的时候<!DOCTYPE html>只能是这样才可以

<div >
    <button type="button" >Action</button>
    <button type="button"  data-toggle="dropdown">

        Toggle Dropdown
    </button>
    <ul  role="menu">
        <li><a  >Action</a></li>
        <li><a  >Another action</a></li>
        <li><a  >Something else here</a></li>
        <li ></li>
        <li><a  >Separated link</a></li>
    </ul>
</div>

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图