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 ...
随机推荐
- phonegap 新窗口 WebView
自定义WebView窗口打开 import com.ap.work.QuickWeb public class QuickPlugin extends CordovaPlugin { /** * 新开 ...
- 转】启动tomcat时 错误: 代理抛出异常 : java.rmi.server.ExportException: Port already in use: 1099的解决办法
原博文出自于:http://www.cnblogs.com/xdp-gacl/p/5288399.html 感谢! 一.问题描述 今天一来公司,在IntelliJ IDEA 中启动Tomcat服务 ...
- 自定义元素 – 在 HTML 中定义新元素
本文翻译自 Custom Elements: defining new elements in HTML,在保证技术要点表达准确的前提下,行文风格有少量改编和瞎搞. 原译文地址 本文目录 引言 用时髦 ...
- HDU 1525 Euclid's Game (博弈)
Euclid's Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- Mysql SQL优化&执行计划
SQL优化准则 禁用select * 使用select count(*) 统计行数 尽量少运算 尽量避免全表扫描,如果可以,在过滤列建立索引 尽量避免在where子句对字段进行null判断 尽量避免在 ...
- True or False
任何对象都可以被测试真值.用于if或while条件中或作为下面的布尔操作的操作数.以下值被视为假: None False 任何数值类型的零,例如,0.0.0.0j . 任何空序列,例如,". ...
- OracleCommand.CommandText 无效
OracleCommand insertADataCmd = conn.CreateCommand(); insertBDataCmd.CommandText = SQL OracleParamete ...
- 递归遍历树结构顺序显示并且添加到list集合
/// <summary> /// 给流程排序 by 于連偉 2015/06/15 /// </summary> /// <param name="lstNex ...
- linux 5 配置xmanager
0 关闭防火墙或者打开177端口 iptables -A INPUT -p udp --dport 177 -j ACCEPT 1.vi /etc/inittab id:5:initdefault: ...
- UVa 11536 Smallest Sub-Array (水题, 滑动窗口)
题意:给定 n 个由0~m-1的整数组成的序列,输入 k ,问你找出连续的最短序列,使得这个序列含有1-k的所有整数. 析:这个题,很简单么,只要从头开始扫一遍就OK,时间复杂度为O(n). 代码如下 ...