Bootstrap系列 -- 41. 带表单的导航条
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动,更好实现对齐。在Bootstrap框架中,还提供了“navbar-right”样式,让元素在导航条靠右对齐。
- <div class="navbar navbar-default" role="navigation">
- <div class="navbar-header">
- <a href="##" class="navbar-brand">Bootstrap</a>
- </div>
- <ul class="nav navbar-nav">
- <li class="active"><a href="##">网站首页</a></li>
- <li class="dropdown">
- <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="##">CSS3</a></li>
- <li><a href="##">JavaScript</a></li>
- <li class="disabled"><a href="##">PHP</a></li>
- </ul>
- </li>
- <li><a href="##">名师介绍</a></li>
- <li><a href="##">成功案例</a></li>
- <li><a href="##">关于我们</a></li>
- </ul>
- <form action="##" class="navbar-form navbar-left" rol="search">
- <div class="form-group">
- <input type="text" class="form-control" placeholder="请输入关键词" />
- </div>
- <button type="submit" class="btn btn-default">搜索</button>
- </form>
- </div>
Bootstrap系列 -- 41. 带表单的导航条的更多相关文章
- Bootstrap系列 -- 12. 水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...
- Bootstrap系列 -- 11. 基础表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...
- Bootstrap学习笔记系列3-------Bootstrap简单表单显示
表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...
- [H5表单]html5自带表单验证体验优化及提示气泡修改
慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...
- MVC遇上bootstrap后的ajax表单模型验证
MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...
- Flask开发系列之Web表单
Flask开发系列之Web表单 简单示例 from flask import Flask, request, render_template app = Flask(__name__) @app.ro ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- html5自带表单验证
起因:今天无意中发现chrome的input框自带表单验证!于是就去试试firefox,惊奇的发现也有自带的验证提示,只不过两者的样式不一样 chrome中的样子: firefox中的样子: 发散:具 ...
随机推荐
- Hadoop生态系统如何选择搭建
Apache Hadoop项目的目前版本(2.0版)含有以下模块: Hadoop通用模块:支持其他Hadoop模块的通用工具集. Hadoop分布式文件系统(HDFS):支持对应用数据高吞吐量访问的分 ...
- 控制非模态弹出框(showModelessDialog)唯一且随父页面关闭
网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两种,如下: 模态:window.showModalDialog() 非模态:window.showModelessDialog() ...
- Spark SQL 之 Migration Guide
Spark SQL 之 Migration Guide 支持的Hive功能 转载请注明出处:http://www.cnblogs.com/BYRans/ Migration Guide 与Hive的兼 ...
- 设置输入域(input/textarea)中文本光标的位置
以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...
- How to create and apply a patch with Git
Creating a patch file with git is quite easy to do, you just need to see how it’s done a few times. ...
- ARC的原理详解
1,ARC的本质 ARC本质是NSAutoreleasePool的直接应用, @autorelease{ return UIApplicationMain(argc, argv, nil, NSStr ...
- plain framework 1 参考手册 入门指引之 许可协议
许可 介绍 Apache2 License 介绍 使用非常友好的阿帕奇2许可协议,你可以应用到你想用的任何应用上,如需修改源码,请保留原作者信息. Apache2 License Apache Lic ...
- Eclipse 各种小图标的含义
Eclipse的Package Explorer和Outline中用图标表示了很多内容,其实能看懂这些图标在编程中也是很有用的. 绿色的小圆表示公有类型:如果是实心的就是函数(),如果是圈就表示是变量 ...
- Objective-C if语句处理 BOOL值不为1和0的情况
BOOL ,布尔值,在Objective-C ,BOOL类型被typedef为signed char(有符号的整型),YES被#define为1,NO被#define为0. 事实上,xcode的编译器 ...
- Vijos1046观光旅游[floyd 最小环]
背景 湖南师大附中成为百年名校之后,每年要接待大批的游客前来参观.学校认为大力发展旅游业,可以带来一笔可观的收入. 描述 学校里面有N个景点.两个景点之间可能直接有道路相连,用Dist[I,J]表示它 ...