bootstrap 两端对齐的导航
您可以在屏幕宽度大于768px时,通过在分别使用.nav .nav-tabs或.nav .nav-pills的同时使用class.nav-justified,让标签式或胶囊式导航菜单与父元素等宽,在更小的屏幕上,导航链接会堆叠。
实例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>bootstrap历练实例: 两端对齐的导航菜单</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
<br /><br /><br />
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
bootstrap 两端对齐的导航的更多相关文章
- Bootstrap两端对齐的导航实例
Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap ...
- Bootstrap<基础十六> 导航元素
Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...
- BootStrap学习(3)_导航菜单
一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...
- CSS两端对齐
前面的话 两端对齐在导航条Tab的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端 ...
- Bootstrap(7) 输入框和导航组件
一.输入框组件 文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. //在左侧添加文字 <!-- //在左侧添加文字 --> ...
- 【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
- css实现两端对齐的3种方法
两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...
- bootstrap 文本对齐风格
Bootstrap通过定义四个类名来控制文本的对齐风格: ☑ .text-left:左对齐 ☑ .text-center:居中对齐 ☑ .text-right:右对齐 ☑ .text- ...
- Bootstrap学习-菜单-按钮-导航
1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...
随机推荐
- Qt测试代码执行时间
////////////////////////////////////////////////////////////////// QString _GetIntervalTime(QTime&am ...
- Lightoj1122 【数位DP】
题意: 给你m个数,让你在里面挑n个组合,保证位数相差不超过2,求能够组合多少种情况: 思路: dp[i][j]代表第i个结尾为j的方案数. #include<bits/stdc++.h> ...
- opencv3.1 压缩并拼图
必须有重叠才能拼,压缩越多,拼接越快 #include <opencv2\opencv.hpp> #include <opencv2\stitching.hpp> using ...
- 骨骼动画反向动力学(IK)的实现
反向动力学,Inverse Kinematics,简称IK.简单地说,由父骨骼的方位和子骨骼的相对变换得到子骨骼的方位,称为正向动力学(Forward Kinematics,FK):而IK则是先确定子 ...
- [Xcode 实际操作]九、实用进阶-(13)调用相机并获取拍摄后的图片
目录:[Swift]Xcode实际操作 本文将演示如何调用相机并获取拍摄后的图片. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首 ...
- suse 11 sp4 设置yast 安装源
suse yast 软件管理工具,用户在初始安装系统时,可能会遗漏比较多的库和工具,那么为了方便大家日后可以随时添加,用户可以选择将安装ISO 文件添加到 suse 的yast 安装源上. 用户首先创 ...
- Git - .gitignore怎么忽略已经被版本控制的文件
问题 如果某个文件已经存在于远程仓库了,也就是说某个文件已经被版本控制了,如果将该文件添加到.gitignore中,是无法生效的.因为.gitignore是用来控制尚未被纳入版本控制的文件,如果文件已 ...
- git 创建分支并关联远程分支
从master分支,重新拉取出一个新的分支,名字为dev,具体命令如下: 1. 切换到被copy的分支(master),从服务器拉取最新版本 $git checkout master $git pul ...
- Spring Cloud Gateway VS Zuul 比较,怎么选择?
Spring Cloud Gateway 是 Spring Cloud Finchley 版推出来的新组件,用来代替服务网关:Zuul. 那 Spring Cloud Gateway 和 Zuul 都 ...
- 2018百度之星初赛(A)2 度度熊学队列
思路: 记录一下c++ stl中的双向链表list的各种用法. https://blog.csdn.net/fanyun_01/article/details/56881515 实现: #includ ...