输入框组:

基本用法:

//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="">&laquo;</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">&raquo;</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学习(四)输入框、导航的更多相关文章

  1. Bootstrap学习-菜单-按钮-导航

    1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...

  2. bootstrap学习笔记之导航条基础

    导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...

  3. BootStrap学习(3)_导航菜单

    一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...

  4. Bootstrap 我的学习记录3 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  5. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  6. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  7. Bootstrap学习-导航条-分页导航

    1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...

  8. BootStrap学习(三)——重写首页之导航栏和轮播图

    1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...

  9. Bootstrap<基础十六> 导航元素

    Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...

  10. Bootstrap<基础四> 代码

    Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...

随机推荐

  1. Python numpy函数:reshape()

    reshape()函数用于改变数组对象的形状: import numpy as np a = np.array([1,2,3,4,5,6,7,8]) #转换成2D数组 b = a.reshape((2 ...

  2. AD的差分输入与单端输入

    AD的差分输入与单端输入 单端输入,输入信号均以共同的地线为基准.这种输入方法主要应用于输入信号电压较高(高于1V),信号源到模拟输入硬件的导线较短(低于15 ft,1ft=304.8mm),且所有的 ...

  3. 【转载】Linux 进程调度时间测量

    测试Context Switch time(进程上下文切换时间) --------------------------------------------------     创建两个进程(实时进程) ...

  4. String字符串补0操作常见方法

     String前补0 java的String字符串补0或空格 方法一:自己写的方法 /* *数字不足位数左补0** @param str* @param strLength*/public stati ...

  5. md5加密(2)

    package test1; import java.security.MessageDigest; public class MD5Test { //十六进制下数字到字符的映射数组 private ...

  6. Byte和byte[]数组

    Byte和byte[]数组,“表示一个 8 位无符号整数, 一般为8位二进制数”. Byte是计算机最基础的存储单位和最基础的通讯单位. 而所有的类型都是支持由byte[]类型转换而来. 为什么说By ...

  7. 11-04 SQLserver基础--连接查询、联合查询、索引

    一.子查询补充: Exists的用法: select*from haha where exists(select*from bumen where bumen.code=haha.bumen,and  ...

  8. IRedisClient

    事实上,IRedisClient里面的很多方法,其实就是Redis的命令名.只要对Redis的命令熟悉一点就能够非常快速地理解和掌握这些方法,趁着现在对Redis不是特别了解,我也对着命令来了解一下这 ...

  9. 问题:C#控制台 停留;结果:c#控制台如何延时显示

    Thread.Sleep(毫秒数);//比如Thread.Sleep(2000)即为延时2秒需using System.Threading; 随笔5 - C#控制台窗口的显示与隐藏 1. 定义一个Co ...

  10. javascript删除option选项的多种方法总结

    转自:https://blog.csdn.net/xiaoxuanyunmeng/article/details/16886505 1. JavaScript 代码如下: var oSel=docum ...