一.输入框组件

//在左侧添加文字

<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>

//在右侧添加文字

<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">@163.com</span>
</div>

//在两侧添加文字

<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>

//设置尺寸,另外三种分别是默认、xs、sm

<div class="input-group input-group-lg">

//左侧使用复选框和单选框

<div class="input-group"> <span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
<div class="input-group"> <span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>

//左侧使用按钮

<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default">按钮</button>
</span>
<input type="text" class="form-control">
</div>

//左侧使用下拉菜单或分列式

<div class="input-group"> <span class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="divider"><a href="#">产品</a></li>
<li class="disabled"><a href="#">关于</a></li>
</ul>
</span>
<input type="text" class="form-control">
</div>

二.导航组件

//基本导航标签页

<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li><a href="#">关于</a></li>
</ul>

//胶囊式导航

<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li><a href="#">关于</a></li>
</ul>

//垂直胶囊式导航

<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li><a href="#">关于</a></li>
</ul>

//导航两端对齐

<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li><a href="#">关于</a></li>
</ul>

//禁用导航中的项目

<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li class="disabled"><a href="#">关于</a></li>
</ul>

//带下拉菜单的导航

<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
</ul>
</li>
</ul>

三.导航条组件

//基本格式

<nav class="navbar navbar-default">
...
</nav>

//反色调导航

<nav class="navbar navbar-inverse">
...
</nav>

//基本导航条,包含标题和列表

<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header"> <a href="#" class="navbar-brand">标题</a> </div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</nav>

//导航条中使用表单

<form action="" class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">提交</button>
</span>
</div>
</form>

//导航中使用按钮

<button class="btn btn-default navbar-btn">按钮</button>

//导航中使用对齐方式,left 和 right

<button class="btn btn-default navbar-btn navbar-right">按钮</button>

//导航中使用一段文本

<p class="navbar-text">我是一段文本</p>

//非导航链接,一般需要置入文本区域内

<a href="#" class="navbar-link">非导航链接</a>

//将导航固定在顶部,下面的内容会自动上移

<nav class="navbar navbar-default navbar-fixed-top">

//将导航补丁在底部

<nav class="navbar navbar-default navbar-fixed-bottom">

//静态导航,和页面等宽的导航条,去掉了圆角

<nav class="navbar navbar-default navbar-static-top">

Bootstrap 输入框和导航组件的更多相关文章

  1. 第二百三十八节,Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文 ...

  2. Bootstrap(7) 输入框和导航组件

            一.输入框组件 文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. //在左侧添加文字 <!-- //在左侧添加文字 --> ...

  3. Bootstrap 学习笔记3 输入框和导航组件

    导航组件: 导航条组件: 导航条代码: <nav class="navbar navbar-default"> <div class="containe ...

  4. bootstrap学习(四)输入框、导航

    输入框组: 基本用法: //form-control 占满 //input-group:输入框组//input-group-addon:输入框前加入一个前缀 <div class="i ...

  5. Bootstrap导航组件

    Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的.改变修饰类可以改变样式. 标签页 注意 .nav-tabs 类依赖 .nav 基类 <ul class=" ...

  6. 详解Bootstrap导航组件

    在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS:  navs.less SASS:  _navs.scss 标签形导航,也称选项卡导航 标签形 ...

  7. Bootstrap学习之路(2)---导航组件

    在bootstrap中,导航条的样式都依赖于.nav类,而样式又分为多种,如: 标签页的样式为:.nav-tabs <ul class="nav nav-tabs"> ...

  8. Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页

    先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...

  9. Bootstrap<基础十七>导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

随机推荐

  1. SQL Server:查询当前服务器有多少连接请求

    有时DBA需要检查当前服务器有多少连接请求,以及连接请求的登录名,客户端版本,主机名,程序名等等之类的信息,我们就可以对服务器的连接状况有所了解,防止不明用户使用. SQL Server本身提供了这么 ...

  2. mvc-1mvc和类(1)

    简单的控制器结构 var Controller = {}; //创建一个users控制器 (Controller.users = function ($) { var nameClick = func ...

  3. DataMember IsRequired属性

        1.简介 在数据契约中,如果需要序列化时,则需要传入指定IsRequired属性:   摘要: 获取或设置一个值,该值用于指示序列化引擎在读取或反序列化时成员必须存在.   public bo ...

  4. 2015ACM/ICPC亚洲区长春站 H hdu 5534 Partial Tree

    Partial Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)To ...

  5. SplendidCRM 如何添加及使用中文语言包

    SplendidCRM 功能很强大,也支持多国语言,但关于中文语言安装的介绍在网上一直都找到,自已摸索了一下,成功使SplendidCRM应用中文,以下是安装方法. 版本号:SplendidCRM 7 ...

  6. BZOJ2773 : ispiti

    首先询问i相当于询问a[j]>=a[i],b[j]>=b[i]的j 如果b[j]==b[i],那么a[j]>a[i],这种情况先用set处理掉 如果b[j]>b[i],那么a[ ...

  7. BZOJ3807 : Neerc2011 Lanes

    左右与右左是两个独立的问题 设f[i]表示i时刻左右车道减少一条的答案 g[i]表示i时刻右左车道增加一条的答案 ans=min(f[i]+g[i+r]) 计算f[i]: 首先暴力计算出f[m+1], ...

  8. 使用CSS修改HTML5 input placeholder颜色

    HTML <input type="text" placeholder="Value" /> 有三种实现方式:伪元素(pseudo-elements ...

  9. oracle中用SQL实现两个日期间的日期形成一个数据集

    比如输入2014-06-1 和 2014-07-1形成一个2014-06-1 2014-06-22014-06-3...2014-07-1 的数据集.   解决方法: select date'2014 ...

  10. Nginx在Windows系统和Linux系统下的重启

    一.Windows系统下重启nginx 1.杀掉nginx进程 tskill nginx echo 已终止所有ginx进程      2.启动nginx cd f:\nginx-  nginx.exe ...