有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动,更好实现对齐。在Bootstrap框架中,还提供了“navbar-right”样式,让元素在导航条靠右对齐。

  1. <div class="navbar navbar-default" role="navigation">
  2.  <div class="navbar-header">
  3.   <a href="##" class="navbar-brand">Bootstrap</a>
  4.  </div>
  5. <ul class="nav navbar-nav">
  6. <li class="active"><a href="##">网站首页</a></li>
  7. <li class="dropdown">
  8. <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  9. <ul class="dropdown-menu">
  10. <li><a href="##">CSS3</a></li>
  11. <li><a href="##">JavaScript</a></li>
  12. <li class="disabled"><a href="##">PHP</a></li>
  13. </ul>
  14. </li>
  15. <li><a href="##">名师介绍</a></li>
  16. <li><a href="##">成功案例</a></li>
  17. <li><a href="##">关于我们</a></li>
  18. </ul>
  19. <form action="##" class="navbar-form navbar-left" rol="search">
  20. <div class="form-group">
  21. <input type="text" class="form-control" placeholder="请输入关键词" />
  22. </div>
  23. <button type="submit" class="btn btn-default">搜索</button>
  24. </form>
  25. </div>

Bootstrap系列 -- 41. 带表单的导航条的更多相关文章

  1. Bootstrap系列 -- 12. 水平表单

    Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...

  2. Bootstrap系列 -- 11. 基础表单

    表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...

  3. Bootstrap学习笔记系列3-------Bootstrap简单表单显示

    表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...

  4. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  5. MVC遇上bootstrap后的ajax表单模型验证

    MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...

  6. Flask开发系列之Web表单

    Flask开发系列之Web表单 简单示例 from flask import Flask, request, render_template app = Flask(__name__) @app.ro ...

  7. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  8. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  9. html5自带表单验证

    起因:今天无意中发现chrome的input框自带表单验证!于是就去试试firefox,惊奇的发现也有自带的验证提示,只不过两者的样式不一样 chrome中的样子: firefox中的样子: 发散:具 ...

随机推荐

  1. Hadoop生态圈以及各组成部分的简介

    1.Hadoop是什么? 适合大数据的分布式存储与计算平台 HDFS: Hadoop Distributed File System分布式文件系统 MapReduce:并行计算框架 解决的问题: HD ...

  2. 创建docker镜像,初始化jdk8与tomcat环境

    一.创建Dockerfile文件: 创建Dockerfile文件,下载jdk与tomcat放在Dockerfile同目录下. Dockerfile文件内容: FROM Ubuntu:14.10 MAI ...

  3. x01.Lab.StreetApp: MVVM

    Store App 特别适用于 MVVM 模式.由于要用到 SQLite,Bing Maps,所以第一步从网上搜索并安装这两个扩展.很难想象在智能手机上运行 SQL Server 这种巨无霸型数据库, ...

  4. [转]net中哈希表的使用 Hashtable

    本文转自:http://www.cnblogs.com/gsk99/archive/2011/08/28/2155988.html 以下是PetShop中DBHelper中的使用过程: //创建哈希表 ...

  5. 2016-2017 ACM-ICPC, NEERC, Southern Subregional Contest (Online Mirror, ACM-ICPC Rules, Teams Preferred)

    A 思路: 贪心,每次要么选两个最大的,要么选三个,因为一个数(除了1)都可以拆成2和3相加,直到所有的数都相同就停止,这时就可以得到答案了; C: 二分+bfs,二分答案,然后bfs找出距离小于等于 ...

  6. [No000008]发工资不仅仅是让你写代码的

    这是我对团队每个新进员工说的第一件事情.这句话的意思是,我并不关心你是如何快速完成任务的,哪怕代码很差,只要它像救生艇通气门一样管用就行.这句话也是我最喜欢的座右铭之一. 这个说法其实很合理:我们的工 ...

  7. C#手工注入辅助工具

    看了某牛出版的MySql手注天书一神书,基本上解决了SQL注入上的知识点,于是打完(酱油)省赛回来通宵了一晚上写了个工具 方便语句构造SQL 联合查询 报错注入 盲注 读写 命令执行 基本都有整合 遇 ...

  8. AndroidStudio 混淆打包

    AndroidStudio中的项目可以用compile的形式引入github上的开 源项目,可以引用module,而不一定都要用libs文件夹中添加jar包的形式.在最终realease打包时,混淆的 ...

  9. linux安装jdk 不成功,找不到版本问题

    http://www.linuxidc.com/Linux/2015-01/112030.htm 配置文件 export JAVA_HOMEexport JRE_HOMEexport CLASSPAT ...

  10. 【转】TestFlight APP测试(IOS如何让上架前给其他人测试)

    原文网址:http://blog.csdn.net/dexin5195/article/details/43966571 大家都知道, 以前iOS项目要测试只需要上传到testflightapp.co ...