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 ...
随机推荐
- python import package at different path
1.导入上一级目录的package import sys sys.path.append('..') import <package> # import package at ../ 2. ...
- c中计时函数 clock()
#include<time.h> int main() { // ... .. // .... printf("Time used = %.2lf\n",(double ...
- 2018SDIBT_国庆个人第六场
A - A codeforces 714A Description Today an outstanding event is going to happen in the forest — hedg ...
- ElasticSearch centos7 安装
参考: https://blog.csdn.net/u014180504/article/details/78733827 https://blog.csdn.net/youzhouliu/artic ...
- 理解 IntelliJ IDEA 的项目配置和Web部署(转载)
理解 IntelliJ IDEA 的项目配置和Web部署 1.项目配置的理解 IDEA 中最重要的各种设置项,就是这个 Project Structre 了,关乎你的项目运行,缺胳膊少腿都不行.最 ...
- Windows常用命令实例
熟练使用DOS常用命令有助于提高工作效率. 1.windows+R:打开运行程序窗口 2.cmd:调用DOS命令窗口 3.mstsc:调用远程桌面命令窗口.mstsc -v 192.168..0.1 ...
- Android 深入浅出 - manifest文件的使用
AndroidManifest的作用简单举例 Manifest如何解析的?
- MD5加密和彩虹表
首先叙述一下彩虹表的原理.本部分内容.图片和例子基本来自英文维基的Rainbow table词条(Rainbow table)——中文维基中目前(2013年10月9日)尚无对应的词条——因此对本答案中 ...
- Python之路 - 网络编程之粘包
Python之路 - 网络编程之粘包 粘包
- Linux安装face_recgnition
Ubuntu 3:apt-get install python3.6-dev 4:pip3 install face_recgnition 5: pip3 install opencv-python ...