表单：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<div class="container"> <!-- class="container"  放在这里面的元素可以使它们居中-->
			<h1 class="panel-danger">用户登录</h1>

		<!-- class="form-horizontal" 设置当前表单为水平的，还可以设置其余样式class="form-xxx" 等  -->
		<form class="form-horizontal">
			<!--文本框
				class="col-md-4" 表示占用当前页面的纵向4个格 ，共有12个格子
				-->
			<div class="form-group">
				<div class="col-md-4">
					<label for="exampleInputEmail1">用户名:</label>
					<input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名 / email">
				</div>
			</div>
			<!--密码框 -->
			<div class="form-group">
				<div class="col-md-4">
					<label for="exampleInputPassword1">密码:</label>
					<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
				</div>
			</div>
			<!--  文件上传   -->
			<div class="form-group">
				<div class="col-md-4">
					<label for="exampleInputFile">请选择文件：</label>
					<input type="file" id="exampleInputFile">
				</div>
			</div>
			<!--复选框    -->
			<div class="checkbox">
					<p class="help-block">兴趣/爱好 </p>
					<label>
						<input type="checkbox">
						复选框一
					</label>
					<label>
						<input type="checkbox">
						复选框二
					</label>
			</div>
			<br />
			<!-- 提交（当前表当）按钮
				class="btn btn-primary"  设置提交按钮的样式
				-->
			<div class="container">
				<div class="form-group">
					<button type="submit" class="btn btn-primary"> 提 交 </button>
				</div>
			</div>
		</form>
		</div>
	</body>
</html>

运行效果：

响应式导航菜单：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
                <!-- 引入jQuery以及bootstrap的类库 -->
                <link rel="stylesheet" href="css/bootstrap.min.css" />

    </head>
    <body>
        <!-- bootstarp 的导航栏默认高度为 50px
            class="nav navbar-inverse" 设置导航的条样式（当前北京为黑色） 还可以写成class="nav navbar-default"
            role="navigation" 表示当前div 已设置为导航栏
            class="container-fluid"  也就是告诉导航栏采用的是流布局方式
            navbar-fixed-top  设置导航条始终显示在页面顶部 ，对应的navbar-fixed-bottom始终显示在下面
        -->
        <div class="nav navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">

                        <div class="navbar-header">
                            <!-- 隐藏按钮当页面小于默认为768像素时，隐藏响应式布局里的内容，显示此按钮
                                 data-target=".nav-collapse" 找的是下面设置响应布局的 div
                             -->
                            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>  <!--每一个”span 标签就是一个小横线  这里的按钮就是由3小横线组成“-->
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <!-- 添加一个logo  因为导航栏的高度默认为50pk 为了以防外一将logo的高度设为50px-->
                            <a href="#" class="navbar-brand">
                                <img src="img/{1Y(FB52``7)ZKN(0EYQUZY.jpg" style="height: 50px; margin-top:-15px;"/>
                            </a>
                        </div>

                <!--
                    class="collapse nav-collapse" 将当前div里的模块变成响应式布局
                -->
                <div class="collapse navbar-collapse">
                        <!-- 导航列表-->
                        <ul class="nav navbar-nav">
                            <!-- class="active"  为默认被选中的菜单 -->
                            <li class="active"><a href="#">首页</a></li>
                            <li><a href="#">导航一</a></li>
                            <li><a href="#">导航二</a></li>
                        </ul>

                        <!--导航的搜索框
                            class="navbar-form navbar-right"  第一个类标签标记为搜索栏
                                                                第二个"navbar-right"设置为靠右显示
                        -->
                        <div class="navbar-form navbar-right">
                            <input type="text" class="form-control" placeholder="请输入关键字"/>
                            <button class="btn btn-primary">搜索</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">登 陆</a>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">注 册</a>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                </div>
            </div>
        </div>

                    <!--
                    使用bootstrap框架的时候，把js文件放在叶下面引入可以提高页面的加载效率
                    因为bootstrap框架要依赖于jQuery所以在 引入 js文件前要先把jQuery.js引入进来
                     -->
                <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
                <script type="text/javascript" src="js/bootstrap.js" ></script>
    </body>
</html>

运行效果：

　　
　　

将页面宽度调成小于默认宽度：

可以点击按钮（就是右上角3条小白条）进行显示和隐藏

前端框架bootstrap 表单和导航菜单的 Demo（第二篇）的更多相关文章

  1. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  2. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  3. Flask10 登录模块、表单框架、表单渲染、表单验证、bookie、请求之前钩子、g对象、编写装饰器

    from flask import Flask from flask import request from flask import render_template from flask_wtf i ...

  4. Bootstrap 表单控件状态(禁用状态)

    Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”.和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处 ...

  5. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  6. bootstrapValidator.js，最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  7. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  9. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. 前端MVVM框架设计及实现（二）

    在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...

  2. jQuery源码分析系列(31) : Ajax deferred实现

    AJAX的底层实现都是浏览器提供的,所以任何基于api上面的框架或者库,都只是说对于功能的灵活与兼容维护性做出最优的扩展 ajax请求的流程: 1.通过 new XMLHttpRequest 或其它的 ...

  3. Bootstrap Metronic 学习记录（一）简介

    1.简介 是一个基于Bootstrap 3.x的高级管理控制面板主题.Bootstrap Metronic - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小 ...

  4. 探讨Android中的内置浏览器和Chrome

    1.Android默认浏览器和Chrome的区别 Android出厂自带的浏览器:安卓WebKit浏览器,也成内置浏览器或者默认浏览器. 安卓WebKit不是Chrome.Chrome浏览器在它的用户 ...

  5. T-SQL：毕业生出门需知系列（八）

    第8课 使用函数处理数据 8.1 函数 [名词]可移植:所编写的代码可以在多个系统上运行 8.2 使用函数 8.2.1 文本处理函数 例1:使用 UPPER() 函数--将文本转换为大写 SELECT ...

  6. Android随笔之——Android广播机制Broadcast详解

    在Android中,有一些操作完成以后,会发送广播,比如说发出一条短信,或打出一个电话,如果某个程序接收了这个广播,就会做相应的处理.这个广播跟我们传统意义中的电台广播有些相似之处.之所以叫做广播,就 ...

  7. ERROR 1819 (HY000): Your password does not satisfy the current policy requirements

    为了加强安全性,MySQL5.7为root用户随机生成了一个密码,在error log中,关于error log的位置,如果安装的是RPM包,则默认是/var/log/mysqld.log. 一般可通 ...

  8. C++ 连接数据库的入口和获取列数、数据

    这里不具体放出完整的程序,分享两个核心函数: 由于这里用到的函数是编译器自己的库所没有的,需要自己下载mysql.h库或者本地有数据库,可以去bin找到,放进去. 前提,我自己的测试数据库是WampS ...

  9. C#枚举类型的常用操作总结

    枚举类型是定义了一组"符号名称/值"配对.枚举类型是强类型的.每个枚举类型都是从system.Enum派生,又从system.ValueType派生,而system.ValueTy ...

  10. 四大组件之ContentProvider

    前言 ContentProvider作为Android的四大组件之一,是属于需要掌握的基础知识,可能在我们的应用中,对于Activity和Service这两个组件用的很常见,了解的也很多,但是对Con ...