一.输入框组件
文本输入框就是可以在<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. python import package at different path

    1.导入上一级目录的package import sys sys.path.append('..') import <package> # import package at ../ 2. ...

  2. c中计时函数 clock()

    #include<time.h> int main() { // ... .. // .... printf("Time used = %.2lf\n",(double ...

  3. 2018SDIBT_国庆个人第六场

    A - A codeforces 714A Description Today an outstanding event is going to happen in the forest — hedg ...

  4. ElasticSearch centos7 安装

    参考: https://blog.csdn.net/u014180504/article/details/78733827 https://blog.csdn.net/youzhouliu/artic ...

  5. 理解 IntelliJ IDEA 的项目配置和Web部署(转载)

    理解 IntelliJ IDEA 的项目配置和Web部署   1.项目配置的理解 IDEA 中最重要的各种设置项,就是这个 Project Structre 了,关乎你的项目运行,缺胳膊少腿都不行.最 ...

  6. Windows常用命令实例

    熟练使用DOS常用命令有助于提高工作效率. 1.windows+R:打开运行程序窗口 2.cmd:调用DOS命令窗口 3.mstsc:调用远程桌面命令窗口.mstsc -v 192.168..0.1 ...

  7. Android 深入浅出 - manifest文件的使用

    AndroidManifest的作用简单举例 Manifest如何解析的?

  8. MD5加密和彩虹表

    首先叙述一下彩虹表的原理.本部分内容.图片和例子基本来自英文维基的Rainbow table词条(Rainbow table)——中文维基中目前(2013年10月9日)尚无对应的词条——因此对本答案中 ...

  9. Python之路 - 网络编程之粘包

    Python之路 - 网络编程之粘包 粘包

  10. Linux安装face_recgnition

    Ubuntu 3:apt-get install python3.6-dev 4:pip3 install face_recgnition 5:  pip3 install opencv-python ...