bootstrap学习(四)输入框、导航
输入框组:
基本用法:
//form-control 占满
//input-group:输入框组
//input-group-addon:输入框前加入一个前缀
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
<span class="input-group-addon">@</span>
</div>
加入小图标:
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-plus "></span>
</span>
<input type="text" class="form-control">
</div>
加入按钮:
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-danger">按钮</button>
</span>
<input type="text" class="form-control"></input>
</div>
导航
Bootstrap 中的导航组件都依赖同一个 .nav
类,状态类也是共用的。改变修饰类可以改变样式。
标签页:
li:标签内部是一个链接或按钮
<ul class="nav nav-tabs">{#选项卡nav-tabs 只写nav不行#}
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
</ul>
胶囊标签页:nav-pills active默认选中
<ul class="nav nav-pills">
<li class="active"><a href="">首页1</a></li>
<li><a href="">首页2</a></li>
<li><a href="">首页3</a></li>
<li><a href="">首页4</a></li>
</ul>
竖胶囊:nav-stacked
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="">首页1</a></li>
<li class="disabled"><a href="">首页2</a></li>
<li><a href="">首页3</a></li>
<li><a href="">首页4</a></li>
</ul>
禁用的标签: .disable 不可选
<ul class="nav nav-pills">
<li class="active"><a href="">首页1</a></li>
<li class="disabled"><a href="">首页2</a></li>
<li><a href="">首页3</a></li>
<li><a href="">首页4</a></li>
</ul>
自适应标签页:nav-justfified 标签页自动占满一行
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="">首页1</a></li>
<li class="disabled"><a href="">首页2</a></li>
<li><a href="">首页3</a></li>
<li><a href="">首页4</a></li>
</ul>
二级导航:.caret 向下的箭头
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="">首页1</a></li>
<li>
<a href="" class="dropdown-toggle" data-toggle="dropdown">
首页2
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
</ul>
</li>
<li><a href="">首页3</a></li>
<li><a href="">首页4</a></li>
</ul>
导航条:
基础导航: navbar-brand:字体稍微大点 navbar-header:导航头信息
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="" class="navbar-brand">导航</a>
<ul class="nav navbar-nav">
<li class="active"><a href="">item1</a></li>
<li class="active"><a href="">item2</a></li>
<li class="active"><a href="">item3</a></li>
</ul>
</div>
</nav>
导航中加入表单:
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="" class="navbar-brand">导航</a>
<ul class="nav navbar-nav">
<li class="active"><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
</ul>
</div>
<form action="" class="navbar-form">
<input type="text" class="form-control">
<button type="button" class="btn btn-default">按钮</button>
</form> </nav>
面包屑导航:
breadcrumb:面包屑样式
<ul class="breadcrumb">
<li>首页</li>
<li>首页2</li>
<li>首页3</li>
</ul>
分页导航:可以给li设置 .active设置激活状态
<ul class="pagination">
<li><a href="">«</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">»</a></li>
</ul>
<ul class="pager">
<li><a href="">上一页</a></li>
<li><a href="">下一页</a></li>
</ul>
官方:https://v3.bootcss.com/components/#input-groups
bootstrap学习(四)输入框、导航的更多相关文章
- Bootstrap学习-菜单-按钮-导航
1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...
- bootstrap学习笔记之导航条基础
导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...
- BootStrap学习(3)_导航菜单
一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...
- Bootstrap 我的学习记录3 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习-导航条-分页导航
1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...
- BootStrap学习(三)——重写首页之导航栏和轮播图
1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...
- Bootstrap<基础十六> 导航元素
Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...
- Bootstrap<基础四> 代码
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
随机推荐
- Python numpy函数:reshape()
reshape()函数用于改变数组对象的形状: import numpy as np a = np.array([1,2,3,4,5,6,7,8]) #转换成2D数组 b = a.reshape((2 ...
- AD的差分输入与单端输入
AD的差分输入与单端输入 单端输入,输入信号均以共同的地线为基准.这种输入方法主要应用于输入信号电压较高(高于1V),信号源到模拟输入硬件的导线较短(低于15 ft,1ft=304.8mm),且所有的 ...
- 【转载】Linux 进程调度时间测量
测试Context Switch time(进程上下文切换时间) -------------------------------------------------- 创建两个进程(实时进程) ...
- String字符串补0操作常见方法
String前补0 java的String字符串补0或空格 方法一:自己写的方法 /* *数字不足位数左补0** @param str* @param strLength*/public stati ...
- md5加密(2)
package test1; import java.security.MessageDigest; public class MD5Test { //十六进制下数字到字符的映射数组 private ...
- Byte和byte[]数组
Byte和byte[]数组,“表示一个 8 位无符号整数, 一般为8位二进制数”. Byte是计算机最基础的存储单位和最基础的通讯单位. 而所有的类型都是支持由byte[]类型转换而来. 为什么说By ...
- 11-04 SQLserver基础--连接查询、联合查询、索引
一.子查询补充: Exists的用法: select*from haha where exists(select*from bumen where bumen.code=haha.bumen,and ...
- IRedisClient
事实上,IRedisClient里面的很多方法,其实就是Redis的命令名.只要对Redis的命令熟悉一点就能够非常快速地理解和掌握这些方法,趁着现在对Redis不是特别了解,我也对着命令来了解一下这 ...
- 问题:C#控制台 停留;结果:c#控制台如何延时显示
Thread.Sleep(毫秒数);//比如Thread.Sleep(2000)即为延时2秒需using System.Threading; 随笔5 - C#控制台窗口的显示与隐藏 1. 定义一个Co ...
- javascript删除option选项的多种方法总结
转自:https://blog.csdn.net/xiaoxuanyunmeng/article/details/16886505 1. JavaScript 代码如下: var oSel=docum ...