BootStrap2学习日记15----选项卡
导航格式1:
<ul class="nav nav-tabs">
<li class="active"><a href="#">中国</a></li>
<li><a href="#">美国</a></li>
<li><a href="#">日本</a></li>
<li><a href="#">英国</a></li>
<li><a href="#">加拿大</a></li>
</ul>
效果1:

导航格式2:
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">中国</a></li>
<li><a href="#">美国</a></li>
<li><a href="#">日本</a></li>
<li><a href="#">英国</a></li>
<li><a href="#">加拿大</a></li>
</ul>
效果2:

选项卡格式3:
<ul class="nav nav-pills ">
<li class="active"><a href="#">中国</a></li>
<li><a href="#">美国</a></li>
<li><a href="#">日本</a></li>
<li><a href="#">英国</a></li>
<li><a href="#">加拿大</a></li>
</ul>
效果3:

在ul 的 class 中加入 nav-stacked 效果如下:

BootStrap2学习日记15----选项卡的更多相关文章
- BootStrap2学习日记16---选项卡内容
代码: <ul class="nav nav-tabs"> <li class="active"><a href="#t ...
- BootStrap2学习日记3--响应式布局实用类
BootStrap2中常用的响应式布局类如: visible-phone 仅在 手机平台显示 visible-tablet 仅在 平板电脑显示 visible-desktop 仅 ...
- BootStrap2学习日记2--将固定布局换成响应式布局
概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...
- BootStrap2学习日记23---图片轮播
<div id="carousel1" class="carousel slide"> <div class="carousel-i ...
- BootStrap2学习日记22---点击展开
先看效果: Code: <div class="accordion" id="accordion2"> <div class="ac ...
- BootStrap2学习日记21---消息提示
<p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...
- BootStrap2学习日记20---定制缩略图
先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...
- BootStrap2学习日记19---缩略图
缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...
- BootStrap2学习日记18---提示消息
代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...
随机推荐
- EasyUI DataGrid 窗口大小自适用--------------未测试
EasyUI 新版本里添加了 fit 属性,不需要老版本的那么复杂,重新load DataGrid.但是昨天用的时间发现只有一个DataGrid的时候用fit:true 很好使,但是如果有其它元素,如 ...
- [转]比较 Rational Unified Process (RUP) 和 Microsoft Solutions Framework (MSF)
文档选项 将此页作为电子邮件发送 级别: 初级 Sandra Sergi Santos, 软件工程专家, IBM 2007 年 6 月 15 日 本文来自于 Rational Edge:Micro ...
- 安装php5.5
安装php5.5 ./configure --prefix=/usr/local/php5.5.14/ --with-apxs2=/usr/local/apache2.2.27/bin/apxs -- ...
- 用keyword实现Editor.GetSelection的退出功能
有时候我们在使用 GetSelection 功能让用户选择实体时,可能会给用户提供一些 keyword 选项,要接收用户选择的 keyword 选项,需要用到 PromptSelectionOptio ...
- Umbraco中更换IndexSet中的NodeType后,搜索页面没有做出对应更改的效果
在项目开发中,使用ExternalSearcher,有一个ExamineIndex.config文件中存放ExternalIndexSet 开始时是这样的 <!-- Default Indexs ...
- Light oj 1100 - Again Array Queries (鸽巢原理+暴力)
题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1100 给你n个数,数的范围是1~1000,给你q个询问,每个询问问你l到r之间 ...
- 将序列设置为字段的默认值 - oracle
1.表结构中log_id 非空.且为主键字段 create table TL_M_QRTZ_LOG( log_id NUMBER(8) not null, job_id NUMBER(8) not n ...
- 关于 mobile sui a外链 老是出现加载失败的解决办法
mobile sui 框架里面的a本身都绑了了一个ajax方法,ajax只能处理同域,跨域就会出现问题 ,所以mobile sui 中的a如果是外链的话就会出现加载失败的提示,这种明显的bug,让用户 ...
- JAVA 开发实例 一 移动的小球
package com.java.move; import java.awt.Color; import java.awt.Dimension; import java.awt.Graphics; i ...
- IE6 背景透明
IE6 背景透明 第 1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了.(注意两处图片的路径写法不一样,本例中,icon_home.png图片与html文件在 ...