Bootstrap(7) 输入框和导航组件
<!-- //在左侧添加文字 -->
<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>
<!-- /基本导航标签页 -->
<!-- <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-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) 输入框和导航组件的更多相关文章
- 第二百三十八节,Bootstrap输入框和导航组件
Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文 ...
- Bootstrap 输入框和导航组件
一.输入框组件 //在左侧添加文字 <div class="input-group"> <span class="input-group-addon&q ...
- Bootstrap 学习笔记3 输入框和导航组件
导航组件: 导航条组件: 导航条代码: <nav class="navbar navbar-default"> <div class="containe ...
- bootstrap学习(四)输入框、导航
输入框组: 基本用法: //form-control 占满 //input-group:输入框组//input-group-addon:输入框前加入一个前缀 <div class="i ...
- 详解Bootstrap导航组件
在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS: navs.less SASS: _navs.scss 标签形导航,也称选项卡导航 标签形 ...
- Bootstrap入门(十三)组件7:导航条
Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...
- Bootstrap入门(十一)组件5:输入框组
Bootstrap入门(十一)组件5:输入框组 1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...
- Bootstrap导航组件
Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的.改变修饰类可以改变样式. 标签页 注意 .nav-tabs 类依赖 .nav 基类 <ul class=" ...
- Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页
先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...
随机推荐
- php 分页实现 和 php 大文件上传失败的处理方式
1. php分页: 要想做php的分页,首先要弄清楚要什么样的分页,关系到哪些参数,参数之间怎么关联: 目标分页效果如下: 分析: 1.主要涉及两个参数:一个是当前输出页面的页码,用变量$p 表示,另 ...
- jenkins com.jcraft.jsch.JSchException: Auth cancel
jenkins构建时报如下错误: 首先去系统管理--->系统设置上看看SCP插件中的用户名和密码是否正确
- ReactiveX 学习笔记(6)条件操作符
Conditional and Boolean Operators 本文的主题为处理 Observable 的条件和布尔操作符. 这里的 Observable 实质上是可观察的数据流. RxJava操 ...
- RabbitMQ.Net 应用(1)
风浪子 概述 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Pu ...
- 树莓派上的软件安装和卸载命令汇总 [ZT]
转自:http://www.eeboard.com/bbs/thread-40823-1-1.html基础命令 安装软件 apt-get install softname1 softname2 sof ...
- Hibernate 再接触 Hello world 模拟Hibernate
没有Hibernate以前 Cilent 客户端 new出一个对象 然后执行JDBC 然后这样的访问数据库并不是面向对象语言 使用Hibernate以后 Cilent new 出一个对象后 访问配置文 ...
- Ajax 学习 第二篇
XMLHttpRequest发送请求 open(method,url,async) 解释 method:do/post,不区分大小写 URL:相对地址 文档地址 async:默认为TRUE 即异步 F ...
- linux基本命令练习
1. 熟悉linux命令并且练习用法以及应用场景. 初学者完成Linux系统分区及安装之后,需熟练掌握Linux系统管理必备命令,命令包括:cd.ls.pwd.clear. chmod.chown.c ...
- linux下网络配置
配置相关 http://bbs.acehat.com/thread-813-1-1.html
- Linux下修改tab建为4个空格
1.编辑 vim /etc/vim/vimrc 2.修改 set ts=4 set expandtab set autoindent 其实只要set ts=4 就ok了.