输入框组(input groups)
避免使用select  支持不好,使用输入框组
尺寸根据  input-group-lg    input-group-sm来选择
 
<div class="container">
    <div class="input-group input-group-lg">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="UserName">
    </div>
    <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>
    <div class="input-group input-group-sm">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>
</div>
 
导航的创建
标签页
注意:.nav-tabs类以来.nav基类
 
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
胶囊式标签页
注意:使用 .nav-pills类
 
<ul id="mytab" class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><a href="">home</a></li>
    <li role="presentation"><a href="">hello</a></li>
    <li role="presentation"><a href="">hello</a></li>
    <li role="presentation"><a href="">hello</a></li>
    <li role="presentation"><a href="">hello</a></li>
</ul>
添加下拉菜单
 
<div class="container">
    <ul id="mytab" class="nav nav-pills nav-justified" role="tablist">
        <li role="presentation" class="active"><a href="">home</a></li>
        <li role="presentation"><a href="">hello</a></li>
        <li role="presentation"><a href="">hello</a></li>
        <li role="presentation"><a href="">hello</a></li>
        <li role="presentation" class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">hello
        <span class="caret"></span>
        </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="" role="menuitem" tabindex="-1">hello</a></li>
                <li role="presentation"><a href="" role="menuitem" tabindex="-1">hello</a></li>
                <li role="presentation"><a href="" role="menuitem" tabindex="-1">hello</a></li>
                <li role="presentation"><a href="" role="menuitem" tabindex="-1">hello</a></li>
            </ul>
        </li>
    </ul>
</div>
<script src="js/jquery.mini.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $("#mytab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    })
</script>
 
导航条的使用
基本导航包括
表单   按钮   文本   非导航的链接   组件排列    固定在顶端或者底部    反色导航条以及路径导航
 
<!--路径导航-->
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <ol class="breadcrumb">
        <li><a href="">home</a></li>
        <li><a href="">contact</a></li>
        <li><a href="">product</a></li>
    </ol>
</nav>
 
 
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-fluid">
            <a class="navbar-brand" href="#">个人主页</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav" id="mytab">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">点我<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">hello1</a></li>
                        <li><a href="#">hello2</a></li>
                        <li><a href="#">hello3</a></li>
                        <li><a href="#">hello4</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
 

bootstrap输入框组、导航和导航条的更多相关文章

  1. Bootstrap输入框组

    前面的话 有时,我们需要将文本输入框(input group)和文件或者小icon组合在一起进行显示, 我们称之为addon.也就是通过在文本输入框 <input> 前面.后面或是两边加上 ...

  2. Bootstrap-CL:输入框组

    ylbtech-Bootstrap-CL:输入框组 1.返回顶部 1. Bootstrap 输入框组 本章将讲解 Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组 ...

  3. Bootstrap -- 下拉菜单、输入框组、导航菜单

    Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...

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

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

  5. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

  6. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  7. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  8. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  9. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

随机推荐

  1. 【CQ18高一暑假前挑战赛1】标程

    [A] #include<bits/stdc++.h> using namespace std; #define ll long long ll qpow(ll a,ll x,ll Mod ...

  2. Java笔记(十)

    正则表达式: 符合一定规则的表达式,用于专门操作字符串. 对QQ号码进行校验,要求:5-11位,0不能开头,只能是数字. public class Demo{ public static void m ...

  3. C++对C的增强

    一.namespace命名空间 1.C++命名空间基本常识所谓namespace,是指标识符的各种可见范围.c++标准程序库中的所有标识符都被定义与一个名为std的namespace中. 1.1:&l ...

  4. bzoj4589

    fwt 原理并不知道 nim游戏石子异或和=0后手赢 那么也就是求a[1]^a[2]^...^a[n]=0的方案数 这个和bzoj3992一样可以dp dp[i][j]表示前i个数异或和为j的方案数 ...

  5. 网络应用软件结构-----CS与BS结构(网络基本知识小结)

    1.网络的大致结构 2.网络编程 通过直接或间接地使用网络通讯的协议实现计算机与计算机之间的通讯.在TCP/IP协议层主要麦网络主机的定位,数据传输的路由,由IP地址可以唯一地确定Internet上的 ...

  6. 萌新java入门笔记

    首先声明以下内容只是散乱笔记,如果有误还望大侠指出!不胜感激! 基本数据类型: 大体和C语言类似: boolean truth = true;//逻辑型 //文字型 char c; String st ...

  7. 2014-5-24 NOIP模拟赛

    Problem 1 护花(flower.cpp/c/pas) [题目描述] 约翰留下他的N(N<=100000)只奶牛上山采木.他离开的时候,她们像往常一样悠闲地在草场里吃草.可是,当他回来的时 ...

  8. [SDOI2019] 热闹又尴尬的聚会

    热闹度\(p\)子图中最小的度数,尴尬度\(q\)独立集大小,之间的约束 \[ \begin{aligned} \lfloor n/(p+1)\rfloor\le q &\rightarrow ...

  9. Metasploit工具的使用

    如果有代理在前面加proxychains msfconsole 进入MSF终端search xxx xxx为要搜索的模块use xxxx 选择要用的攻击模块show options 查看相关设置set ...

  10. 《ERP真的免费不花钱·企业自主实施OdooERP》试读:第十章-仓库条码操作案例

    文/开源智造联合创始人老杨 本文来自<企业自主实施OdooERP>的试读章节.书籍尚未出版,请勿转载.欢迎您反馈阅读意见. 案例背景 各位读者同学,本案例假定读者已经完成了进销存案例练习. ...