2013-10-11 22:38:56 ChenTongBing 阅读数 40

        Bootstrap是一个非常好用的Beb前端开发框架,它提供了三种方式的导航条组件:标签页、pill和列表。这里讲述的是标签页的使用。

        查看官方网页,可知标签页的基本使用方式:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

 

        我们要在不同的标签之间切换,就可以在a标签的指向路径上利用action进行请求后台,然后再在struts中配置这个action的跳转路径,到某个jsp中去。

<ul class="nav nav-tabs">
  <li class="active" id="action1">
    <a href="action1.action">首页</a>
  </li>
  <li id="action2"><a href="action2.action">标签二</a></li>
  <li id="action3"><a href="action3.action">标签三</a></li>
</ul>

 

        这里以actin1.action为例,在struts中配置:

        

<action name="action1" class="action1" method="action1">
		  <result name="action1">/WEBINF/page/action1.jsp</result>
</action>

 

        在方法action1()中做一些数据初始化之类的操作,然后进入action1.jsp中将数据进行展示、刷新等常规操作。其他的标签、action、jsp也是类似的。

        这个标签页组件当然是要在三个jsp文件中都有的,也就是说三个标签就要有三个独立的jsp文件,这三个jsp中都得有这同一个标签组件,我们可以通过将这个标签页写在另外一个jsp中,然后在这三个jsp中用jsp标签引入即可:<jsp:include page="navigation-area.jsp" />,navigationg-area.jsp中就是放入了这个共同的标签页组件的jsp文件。

        如果我们选择的是标签二或者标签三,总之不是首页,现在要进行刷新,那么,就要在它们的jsp中进行必要的处理,否则,一刷新,就会回到第一个标签里面去。需要在action1.jsp、action2.jsp、action3.jsp等每个标签的jsp里面用这样一个jquery语句:

 

<script type="javascript/text">
        $(document).ready(function(){
	        $("#action1").attr("class", "active");
});
</script>

 

 

意思就是说通过找到标签的id,将它这个标签的样式设置为active。

 

如有更好的方法,欢迎前来指导!!!

 

效果图:



 

 

2019-02-04 00:16:35 baoyu_G 阅读数 3719

自己做一个Bootstrap前端页面,发现如果把导航栏某一栏的<li>标签的class设置成avtive的话,每次点击其他的导航链接都是那个设置的链接为选中状态。为了解决这个问题,在网上看到了类似这样的做法:

思路是获取页面的元素,将原来的active移除,将被点击的<li>标签添加上class属性;

这种方式并没有奏效。

因为页面导航栏的<a>标签有href,每次点击相当于页面刷新,点击后会有一瞬间的切换但是刷新后还是会恢复到默认的状态,等待下一次的点击、修改、刷新为默认选中(下图应该是人事档案的li标签添加class="avtive",这是修改后的)

真正的解决办法是:让被选中的标签跟随页面的url变化:

每次页面加载完成后,根据当前页面的url,获取被点击的标签的ID,在通过JQuery操作为该标签添加active属性;即后设置active属性(上面获取click动作找到被点击标签再修改的方式相当于先修改,页面刷新就会被重置)

2019-02-01 15:27:22 qq_42402854 阅读数 1095

一、导航元素

1、导航标签并添加标签页

    注意 .nav-tabs 类依赖 .nav 基类。

    <div class="container">
        <ul class="nav nav-tabs">
            <li  class="active"><a href="#tab_1" data-toggle="tab">标签1</a></li>
            <li><a href="#tab_2" data-toggle="tab">标签2</a></li>
            <li><a href="#tab_3" data-toggle="tab">标签3</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab_1" class="tab-pane fade in active">
                标签1内容
            </div>
            <div id="tab_2" class="tab-pane fade">
                标签2内容
            </div>
            <div id="tab_3" class="tab-pane fade">
                标签3内容
            </div>
        </div>
    </div>

              

2、胶囊式导航标签并添加标签页

     将上面的 .nav-tabs 类替换为 .nav-pills 类即可:

    也可以垂直方向堆叠排列的。只需再添加 .nav-stacked 类, 使用栅格布局。

        <div class="row">
            <div class="col-xs-2">
                <ul class="nav nav-pills nav-stacked">
                    <li  class="active"><a href="#tab_1" data-toggle="tab">标签1</a></li>
                    <li><a href="#tab_2" data-toggle="tab">标签2</a></li>
                    <li><a href="#tab_3" data-toggle="tab">标签3</a></li>
                </ul>
            </div>
            <div class="col-xs-10">
                <div class="tab-content">
                    <div id="tab_1" class="tab-pane fade in active">
                        标签1内容
                    </div>
                    <div id="tab_2" class="tab-pane fade">
                        标签2内容
                    </div>
                    <div id="tab_3" class="tab-pane fade">
                        标签3内容
                    </div>
                </div>
            </div>
        </div>

3、禁用链接

     在链接上添加 .disabled 类,从而实现链接为灰色且没有鼠标悬停效果。

<li class="disabled"><a href="#tab_2" data-toggle="tab">标签2</a></li>

4、添加下拉菜单

    <div class="container">
        <ul class="nav nav-tabs">
            <li  class="active"><a href="#tab_1" data-toggle="tab">标签1</a></li>
            <li><a href="#tab_2" data-toggle="tab">标签2</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    下拉菜单<i class="caret"></i>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#tab_31" data-toggle="tab">菜单1</a></li>
                    <li><a href="#tab_32" data-toggle="tab">菜单2</a></li>
                </ul>
            </li>
        </ul>
        <div class="tab-content">
            <div id="tab_1" class="tab-pane fade in active">
                标签1内容
            </div>
            <div id="tab_2" class="tab-pane fade">
                标签2内容
            </div>
            <div id="tab_31" class="tab-pane fade">
                菜单1内容
            </div>
            <div id="tab_32" class="tab-pane fade">
                菜单2内容
            </div>
        </div>
    </div>

    

 

二、导航栏

       导航栏在您的应用或网站中作为导航页头的响应式基础组件;

       在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。

1、默认导航栏

     创建一个默认的导航栏的步骤如下:

  • 向 <nav> 标签添加 class .navbar、.navbar-default
  • 向上面的元素添加 role="navigation",有助于增加可访问性。
  • 向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
  • 为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"> 导航栏首页</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">Java</a>
                    </li>
                    <li>
                        <a href="#">Bootstrap</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Web<i class="caret"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">html</a></li>
                            <li><a href="#">jsp</a></li>
                            <li><a href="#">php</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

   

2、响应式的导航栏

     为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 class .collapse.navbar-collapse 的 <div> 中。即:

 <div class="collapse navbar-collapse" id="example-navbar-collapse">

      折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。即:

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"> 导航栏首页</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">Java</a>
                    </li>
                    <li>
                        <a href="#">Bootstrap</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Web<i class="caret"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">html</a></li>
                            <li><a href="#">jsp</a></li>
                            <li><a href="#">php</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    

3、导航栏中的表单和导航链接

     使用 .navbar-form class。

     登录、注册导航链接

组件对齐方式

    使用 class .navbar-left 或 .navbar-right 向左或向右对齐

    

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"> 导航栏首页</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Java</a>
                        </li>
                        <li>
                            <a href="#">Bootstrap</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Web<i class="caret"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">html</a></li>
                                <li><a href="#">jsp</a></li>
                                <li><a href="#">php</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入">
                            <span class="input-group-btn">
                                <button class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
                            </span>
                        </div>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active">
                            <a href="#"><i class="glyphicon glyphicon-user"></i>注册</a>
                        </li>
                        <li>
                            <a href="#"><i class="glyphicon glyphicon-log-in"></i>登录</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

     

4、固定到顶部或底部

     向 .navbar class 添加 class .navbar-fixed-top 或者添加 class .navbar-fixed-bottom

    为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 <body> 标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置。

    <nav class="navbar navbar-default navbar-fixed-top">

5、静态的顶部

     如需创建能随着页面一起滚动的导航栏,向class .navbar 添加 .navbar-static-top。该 class 不要求向 <body> 添加内边距(padding)。

    和 4固定不同的是,不添加padding

   .navbar-static-top 去掉了由 .navbar-default 设置的左、右和顶部的边框,保留navbar-default把圆角变方角

    <nav class="navbar navbar-default navbar-static-top">

6、反色的导航栏

     只需要简单地向class .navbar 添加 .navbar-inverse 即可

   

    <nav class="navbar navbar-default navbar-static-top navbar-inverse">

 

 

三、路径导航

       在一个带有层次的导航结构中标明当前页面的位置。

      路径导航也称为面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式

      可自定义分隔符 content内容

.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
        <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ul>

    

 

2017-08-09 15:33:26 qq13650793239 阅读数 505

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式。
1、默认的导航栏
创建一个默认的导航栏的步骤如下:

2、响应式的导航栏
为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 div 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。三个带有 class .icon-bar 的 span 创建所谓的汉堡按钮。这些会切换为 .nav-collapse div 中的元素。为了实现以上这些功能,您必须包含 Bootstrap 折叠(Collapse)插件。

<nav class="navbar navbar-fixed-top">  
      <div class="container">
        <div class="row no-gutter">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="/file_upload"><img src="/static/image/logo.png"></a>
          </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:25px;">
            <ul class="nav navbar-nav var-top">
              <li><a href="/my_file">个人文件列表</a></li>
              <li><a href="/public_file">公共文件列表</a></li>
            </ul>
            <ul class="nav navbar-nav pull-right" style="">
              <li class="divider-vertical"><a>欢迎,{{username}}</a></li>
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">后台管理</a>
                <ul class="dropdown-menu">
                  <li><a href="/admin/">用户管理</a></li>
                  <li><a href="/#">修改密码</a></li>
                  <li><a href="/logout/">退出登录</a></li>
                </ul>
              </li>
           </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>
2016-06-12 18:47:29 liuwengai 阅读数 1875

1.表格导航或标签:
创建一个标签式的导航菜单
这里写图片描述

以一个带有class.nav的无序列表开始
添加class.nav-tabs
<ul class="nav nav-tabs">//添加两个类
   <li class="active"><a href="#">Home</a></li>//设置首页的选项处于选中状态
   <li><a href="#">HTML</a></li>//鼠标经过时,背景为浅灰色
   <li><a href="#">CSS</a></li>
   <li><a href="#">JAVASCRIPT</a></li>
   <li><a href="#">Mysql</a></li>
   <li><a href="#">PHP</a></li>
</ul>

2.胶囊式导航菜单

使用 class .nav-pills代替.nav-tabs
//home显示为蓝色背景的方块,字体颜色为白色,其他的没有变化

垂直的胶囊导航菜单

使用.nav ,.nav-pills,nav-stacked,可以让胶囊垂直堆叠

两端对齐的导航栏

增加.nav-justified

禁用链接
这里写图片描述

<ul class="nav nav-pills">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JAVASCRIPT</a></li>
   <li class="disabled"><a href="#">Mysql</a></li>//显示为灰色,禁用了该链接的hover状态
   <li><a href="#">PHP</a></li>
</ul>

3.下拉菜单
带有下拉菜单的标签
效果图

无序列表包含两个类:.nav,.nav-tabs
添加带有.dropdown-menu class的无序列表
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" herf="#">JAVASCRIPT <span class="caret"></span> </a>//设置下拉菜单
  <ul class="dropdown-menu">//下拉菜单的内容
    <li><a href="#">jquery </a></li>
    <li><a href="#">ajax</a></li>
    <li class="divider"></li>//分割线
    <li><a href="#">json</a></li>
    </ul>
   </li>
  <li><a href="#">PHP</a></li>
</ul>

4.默认的导航栏

创建一个默认的导航栏步骤
(1)向<nav>标签添加class.navbar ,.navbar-default
(2)添加role="navigation",有助于增加课访问性
(3)向<div>元素添加一个标题class.navbar-header,内部包含了带有class navbar-brand<a>元素,让文本看起来更大一号4)导航栏添加链接,只需要简单的添加class .nav, .navbar-nav的无序列表即可

效果图
这里写图片描述

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header"> <a class="navbar-brand" href="#">刘小妞的博客</a> </div>
  <div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">JAVASCRIPT <span class="caret"></span> </a>
        <ul class="dropdown-menu">
          <li><a href="#">jquery </a></li>
          <li><a href="#">ajax</a></li>
          <li class="divider"></li>
          <li><a href="#">json</a></li>
        </ul>
      </li>
      <li><a href="#">Mysql</a></li>
      <li><a href="#">PHP</a></li>
    </ul>
  </div>
</nav>

5.导航栏中的表单
导航栏中的表单使用.navbar-form
这里写图片描述

<nav class="navbar navbar-default" role="navigation">
    <div class=navbar-header>
    <a class="navbar-brand" href="#">刘小妞的博客
    </a>
    </div>
    <div>//设置搜索框
        <form class="navbar-form navbar-left" role="search">//对齐方式为向左对齐
        <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>

</nav>
//导航栏中的文本
<p class="navbar-text">刘小妞的博客</p>

6.
非导航链接:不想在导航栏导航组件内使用标准的链接,那么使用class navbar-link来为默认的导航栏添加适当的颜色

 <div>
      <p class="navbar-text navbar-right">Signed in as 
         <a href="#" class="navbar-link">Thomas</a>
      </p>
   </div>
//导航栏固定到顶部
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<nav>
//导航栏固定到底部
class="navbar navbar-default navbar-fixed-bottom"
//静态的顶部
//随着页面一起滚动的导航栏,添加.navbar-static-top
//倒置的导航栏
为了创建一个带有黑色背景白色文本的倒置导航栏,只需添加.navbar-inverse

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

<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2016</a></li>
<li class="active">六月</li>

Bootstrap—导航栏

阅读数 901

没有更多推荐了,返回首页