1、导航制作:在最外层div上应用.navbar,就可以将导航条固定到顶部或者底部
--------------------------------------------------------------------------
最简单的导航条:
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Project</a>
<ul class="nav">
<li class="avtive"><a>java</a></li>
<li><a>java</a></li>
<li><a>java</a></li>
</ul>
</div>
</div>
--------------------------------------------------------------------------
固定到顶部的导航条:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Project</a>
<ul class="nav">
<li class="avtive"><a>java</a></li>
<li><a>java</a></li>
<li><a>java</a></li>
</ul>
</div>
</div>
--------------------------------------------------------------------------
固定到底部的导航条:
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<a class="brand" href="#">Project</a>
<ul class="nav">
<li class="avtive"><a>java</a></li>
<li><a>java</a></li>
<li><a>java</a></li>
</ul>
</div>
</div>
--------------------------------------------------------------------------
导航条展现项目名称 只需要用<a>标签,class设置成brand
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">这里显示项目名称Project</a>
<ul class="nav">
<li class="avtive"><a>java</a></li>
<li><a>java</a></li>
<li><a>java</a></li>
</ul>
</div>
</div>
--------------------------------------------------------------------------
导航条菜单 用ul标签嵌套li标签即可 active表示选中
<ul class="nav">
<li class="active"><a href="#">Java</a></li>
<li><a href="#">Oracle</a></li>
<li><a href="#">Linux</a></li>
</ul>
--------------------------------------------------------------------------
菜单之间增加间隔 可通过 加上 <li class="divider-vertical"></li>
<ul class="nav">
<li class="active"><a href="#">Java</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Oracle</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Linux</a></li>
</ul>
--------------------------------------------------------------------------
导航条里如果要加一个搜索框,或者是登入注册按钮 则在<li>继续加上
pull-left是紧跟菜单也就是居左,pull-right就是靠近最右边栏菜单,居右
<ul class="nav">
<li class="active"><a href="#">Java</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Oracle</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Linux</a></li>
<form class="navbar-form pull-left">
<input type="text" class="span2">
<button type="submit" class="btn">Submit</button>
</form>
</ul>
--------------------------------------------------------------------------
如果是搜索框,form也可以应用navbar-search,输入框应用search-query
<ul class="nav">
<li class="active"><a href="#">Java</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Oracle</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Linux</a></li>
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="请输入搜索内容">
</form>
</ul>
--------------------------------------------------------------------------
导航条中使用下拉菜单:这里在Oracle菜单下加上2个子菜单
<ul class="nav">
<li class="active"><a href="#">Java</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Oracle
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li class="divider"></li>
<li><a href="login.html">Logout</a></li>
</ul>
</li>
<li><a href="#">Linux</a></li>
</ul>
--------------------------------------------------------------------------
导航条颜色反转 变成黑色
<div class="navbar navbar-inverse">
...
</div>
--------------------------------------------------------------------------
导航条例子:http://sandbox.runjs.cn/show/ottllwdi#
--------------------------------------------------------------------------
2、按钮制作:一个简单的按钮
<button class="btn">Hello World!!</button>
--------------------------------------------------------------------------
可以将多个按钮放到一个按钮组中
<div class="btn-group">
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
</div>
--------------------------------------------------------------------------
多个按钮组 也就是工具条 就像编辑器那种 可把多个按钮组放到按钮条中
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
</div>
<div class="btn-group">
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>
<div class="btn-group">
<button class="btn">8</button>
</div>
</div>
--------------------------------------------------------------------------
垂直的按钮组: 默认水平的
<div class="btn-group btn-group-vertical">
<button type="button" class="btn">1</button>
<button type="button" class="btn">2</button>
<button type="button" class="btn">3</button>
<button type="button" class="btn">4</button>
</div>
--------------------------------------------------------------------------
下拉菜单按钮: 其实与之前的下拉菜单类似 把nav改成btn-group就可以了
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">动作 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">其他动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">被间隔的链接</a></li>
</ul>
</div>
--------------------------------------------------------------------------
按钮大小 btn-large btn-small btn-mini
<button class="btn btn-large">Hello World!!</button>
<button class="btn btn-small">Hello World!!</button>
<button class="btn btn-mini">Hello World!!</button>
--------------------------------------------------------------------------
带间隔的下拉按钮:其实就是把之前的一个button拆分成两个button
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">其他动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">被间隔的链接</a></li>
</ul>
</div>
--------------------------------------------------------------------------
上弹按钮:只要在 .dropdown-menu 最近的父标签上应用 .dropup 即可
<div class="btn-group dropup">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">其他动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">被间隔的链接</a></li>
</ul>
</div>
--------------------------------------------------------------------------
按钮例子:http://sandbox.runjs.cn/show/nsz4igvx
--------------------------------------------------------------------------
3、标签页制作: 基本的标签页,与导航条菜单类似 加上nav-tabs
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
胶囊连接 则nav-pills 丑
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
如果要禁用某个标签页:li标签中应用 disabled
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">介绍</a></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
叠放式标签页:默认是水平放置的 需要应用nav-stacked 就能垂直放置
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
标签页创建下拉项: 和之前的类似
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">介绍</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
消息<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>菜单1</li>
<li>菜单2</li>
</ul>
</li>
</ul>
--------------------------------------------------------------------------
导航列表: 应用nav-list
<ul class="nav nav-list">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">介绍</a></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
带图标的导航列表:<i>标签显示图标 使用<li class="divider"></li>会有一个水平间隔
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-book"></i>首页</a></li>
<li class="disabled"><a href="#">介绍</a></li>
<li class="divider"></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
多个标签页之间的切换:用tabbable的div把nav-tabs嵌套起来
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">段 1</a></li>
<li class=""><a href="#2" data-toggle="tab">段 2</a></li>
<li class=""><a href="#3" data-toggle="tab">段 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>这里是段1</p>
</div>
<div class="tab-pane" id="2">
<p>这里是段2</p>
</div>
<div class="tab-pane" id="3">
<p>这里是段3</p>
</div>
</div>
</div>
--------------------------------------------------------------------------
标签页切换 内容在上方:
<div class="tabbable tabs-below">
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>这里是段1</p>
</div>
<div class="tab-pane" id="2">
<p>这里是段2</p>
</div>
<div class="tab-pane" id="3">
<p>这里是段3</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">段 1</a></li>
<li class=""><a href="#2" data-toggle="tab">段 2</a></li>
<li class=""><a href="#3" data-toggle="tab">段 3</a></li>
</ul>
</div>
--------------------------------------------------------------------------
标签页居左 居右 tabs-left tabs-right
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
--------------------------------------------------------------------------
标签页例子:http://sandbox.runjs.cn/show/z1o3z6wp#
--------------------------------------------------------------------------
分享到:
相关推荐
总的来说,基于Bootstrap的后台管理菜单设计是一个结合了前端技术与用户体验设计的过程。通过有效利用Bootstrap提供的组件和工具,我们可以构建出既美观又实用的后台管理系统,为管理员提供高效的工作环境。而“管理...
Bootstrap 提供了三种下载的样式生产环境开发包:包含最基本的已经编译好的 Bootstrap 一如代码,里面包含,CSS 样式,JS 代码,font 字体样式等;Bootstrap 源码:内容较多,包含所有的 Bootstrap 源代码,已经编译...
Bootstrap图片轮播是一种常见的网页设计元素,用于展示一组图片或内容,通过自动切换或用户交互来呈现不同的项。在Bootstrap框架中,轮播组件(Carousel)是一个强大的工具,可以轻松地创建具有动态过渡效果的多图像...
Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和样式,使得构建响应式、移动优先的网页变得快速而简单。在这个“BootStrap实现登录注册动态切换”的主题中,我们将深入探讨如何利用...
"jQuery Bootstrap打开多个标签页面代码"是一个利用这两个工具实现的特定功能,它允许用户在一个应用中打开并切换多个页面,就像在浏览器中使用标签页一样。这个功能对于提供多页面浏览体验的网站或者应用来说非常...
Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和设计工具,使得构建响应式、移动优先的网页变得快速而简单。这个压缩包文件集合了多种基于Bootstrap的常用页面模板,涵盖了登录注册页和...
Bootstrap,由Twitter开发,是一款广泛应用于前端开发的开源框架,以其简洁、直观和强大的特性而闻名。Bootstrap 3.3.7是该框架的一个稳定版本,提供了丰富的组件、响应式设计以及易于定制的样式,旨在帮助开发者...
Bootstrap5本身是一个流行的前端框架,它提供了组件化的设计、响应式的布局以及易用的JavaScript插件,帮助开发者快速构建现代网页应用。而bootstrap-icons则扩展了这个框架的功能,提供了图标支持,使得开发者在不...
这款基于Bootstrap的个人简历模板,可以帮助你利用现代Web技术制作一款吸引眼球的在线简历,从而在求职竞争中脱颖而出。 Bootstrap的核心特性包括网格系统、预定义的组件和JavaScript插件,这些都能帮助开发者轻松...
Bootstrap是一种统计方法,主要用于处理小样本数据,通过模拟和重抽样的方式来估计统计量的分布,进而推断参数的置信区间或进行假设检验。这个压缩包`bootstrap.zip`包含了一系列与Bootstrap方法相关的MATLAB代码,...
Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和设计工具,使得构建响应式、移动优先的网站变得简单高效。在这个“Bootstrap后台登录界面模板”中,我们可以找到一个预设计好的登录页面...
一、Bootstrap 介绍 Bootstrap 是一个流行的前端框架,用于构建响应式、mobile-first 的 Web 应用程序。它提供了一些常用的 HTML、CSS 和 JavaScript 组件,可以快速构建现代化的 Web 应用程序。Bootstrap 的主要...
Bootstrap框架是目前最流行、最易用的前端开发框架之一,它由Twitter开发并开源,旨在简化网页设计和响应式布局的实现。这份"一份Bootstrap框架的期末作业"集合,显然是一个学习和实践Bootstrap的资源包,包含了作者...
Bootstrap是世界上最受欢迎的前端开发框架之一,主要用于快速构建响应式和移动优先的网站。这个“bootstrap第一次大作业.rar”文件显然包含了一个初学者级别的网页项目,利用了Bootstrap、HTML和CSS来创建一个基本的...
Bootstrap Icons:Bootstrap 有史以来第一次拥有自己的图标库,并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等。Bootstrap Icons ...
Bootstrap栅格系统是一种基于12列的响应式布局框架,旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果,优化用户体验。Bootstrap栅格系统的...
Bootstrap是世界上最流行的前端开发框架之一,由Twitter的开发者创建,旨在简化Web开发流程,提供一套响应式、移动优先的设计方案。这个“bootstrap新浪云素材”压缩包文件显然包含了一系列与Bootstrap相关的学习...
Bootstrap 4.0 是一个流行的前端开发框架,用于构建响应式和移动优先的网页项目。这个资源包"bootstrap_4.0_template"提供了一个基于Bootstrap 4.0的基础模板,适用于快速开发前台和后台界面。下面我们将深入探讨...
这个压缩包包含了Bootstrap的4.6.2版本,这是一个成熟的版本,提供了大量的改进和优化,以提升开发者的工作效率和用户体验。 在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中,我们可以...
Bootstrap评论列表模板是一种基于Bootstrap前端框架设计的网页组件,它为网站提供了一种标准化的、美观的、响应式的用户评论展示方式。Bootstrap是由Twitter开发并开源的,它是一套强大的前端开发工具集,包含了丰富...