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

左侧使用复选框和单选框
<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">
<input type="text" class="form-control"> <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>
</div>

二.导航组件
Bootstrap 提供了一组导航组件,用于实现 Web 页面的栏目操作。
//基本导航标签页

    <!-- /基本导航标签页 -->
<!-- <ul class="nav nav-tabs"> -->
<!-- //胶囊式导航 -->
<!-- <ul class="nav nav-pills"> -->
<!-- //垂直胶囊式导航 -->
<!-- <ul class="nav nav-pills nav-stacked"> -->
<!-- //导航两端对齐 -->
<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-pills">

//垂直胶囊式导航
<ul class="nav nav-pills nav-stacked">

//导航两端对齐
<ul class="nav nav-tabs nav-justified">

//禁用导航中的项目
<li class="disabled"><a href="#">关于</a></li>

//带下拉菜单的导航
<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">
<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>

    <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>
<!-- //导航中使用按钮 -->
<button class="btn btn-default navbar-btn">按钮</button>
<!-- //导航中使用一段文本 -->
<p class="navbar-text">我是一段文本</p>
</ul>
</div>
</nav>

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

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

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

  2. Bootstrap 输入框和导航组件

    一.输入框组件 //在左侧添加文字 <div class="input-group"> <span class="input-group-addon&q ...

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

  6. Bootstrap入门(十三)组件7:导航条

    Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...

  7. Bootstrap入门(十一)组件5:输入框组

    Bootstrap入门(十一)组件5:输入框组   1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...

  8. Bootstrap导航组件

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

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

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

随机推荐

  1. php 分页实现 和 php 大文件上传失败的处理方式

    1. php分页: 要想做php的分页,首先要弄清楚要什么样的分页,关系到哪些参数,参数之间怎么关联: 目标分页效果如下: 分析: 1.主要涉及两个参数:一个是当前输出页面的页码,用变量$p 表示,另 ...

  2. jenkins com.jcraft.jsch.JSchException: Auth cancel

    jenkins构建时报如下错误: 首先去系统管理--->系统设置上看看SCP插件中的用户名和密码是否正确

  3. ReactiveX 学习笔记(6)条件操作符

    Conditional and Boolean Operators 本文的主题为处理 Observable 的条件和布尔操作符. 这里的 Observable 实质上是可观察的数据流. RxJava操 ...

  4. RabbitMQ.Net 应用(1)

    风浪子 概述 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Pu ...

  5. 树莓派上的软件安装和卸载命令汇总 [ZT]

    转自:http://www.eeboard.com/bbs/thread-40823-1-1.html基础命令 安装软件 apt-get install softname1 softname2 sof ...

  6. Hibernate 再接触 Hello world 模拟Hibernate

    没有Hibernate以前 Cilent 客户端 new出一个对象 然后执行JDBC 然后这样的访问数据库并不是面向对象语言 使用Hibernate以后 Cilent new 出一个对象后 访问配置文 ...

  7. Ajax 学习 第二篇

    XMLHttpRequest发送请求 open(method,url,async) 解释 method:do/post,不区分大小写 URL:相对地址 文档地址 async:默认为TRUE 即异步 F ...

  8. linux基本命令练习

    1. 熟悉linux命令并且练习用法以及应用场景. 初学者完成Linux系统分区及安装之后,需熟练掌握Linux系统管理必备命令,命令包括:cd.ls.pwd.clear. chmod.chown.c ...

  9. linux下网络配置

    配置相关 http://bbs.acehat.com/thread-813-1-1.html

  10. Linux下修改tab建为4个空格

    1.编辑 vim /etc/vim/vimrc 2.修改 set ts=4 set expandtab set autoindent 其实只要set ts=4 就ok了.