<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>登录界面</title>

    <!--01.引入需要的css样式文件-->

    <link rel="stylesheet" href="css/bootstrap.css">

    <!--02.引入我们的jQuery库-->

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

    <!--03.引入bootstrap的js库-->

    <script type="text/javascript" src="js/bootstrap.js"></script>

</head>

<body>

<!--导航菜单 默认的高度是50px navbar-fixed-top 始终位于网页的头部-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

    <!--设置文字不显示时候的标签-->

    <div class="navbar-header">

        <!--这里网页中也可以设置成一个图片  但是 需要设置图片的大小-->

        <a class="navbar-brand">请选择姓名</a>

        <button class="navbar-toggle" type="button" data-toggle="collapse"

                data-target=".navbar-collapse">

            <!--书写 横线-->

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

        </button>

    </div>

    <div class="collapse navbar-collapse">

        <!-- navbar-nav  这是我们的li左浮动-->

        <ul class="nav navbar-nav">

            <li><a href="#">小强</a></li>

            <li><a href="#">小红</a></li>

            <li><a href="#">小白</a></li>

        </ul>

        <!--书写登录  注册  搜索框-->

        <div class="navbar-form navbar-right">

            <a href="#">登录</a>

            <a href="#">注册</a>

            <input type="text" class="form-control" placeholder="请输入关键字">

            <button class="btn btn-primary">搜索</button>

        </div>

    </div>

</nav>

<!--为了不遮盖后面的内容  设置一个div高度为50px-->

<div  style="height: 50px"></div>

<!--container:我们的代码写在这个容器中   就会具有一些样式-->

<div class="container">

    <!--设置字体图标 class="glyphicon glyphicon-user"-->

     <h1 class="page-header"><span class="glyphicon glyphicon-user"></span> 用户登录</h1>

    <form class="form-horizontal">

         <div  class="form-group">

             <div class="col-md-5">

             <input type="text" class="form-control" placeholder="请输入用户名/email">

             </div>

         </div>

        <div  class="form-group">

            <div class="col-md-5">

                <input type="text" class="form-control" placeholder="请输入密码">

            </div>

        </div>

        <div  class="form-group">

            <div class="col-md-5">

                <input type="button" class="btn btn-primary" value="登录">

            </div>

        </div>

    </form>

    <!--验证能固定在网页的顶部-->

    <div  style="height: 1000px"></div>

</div>

</body>

</html>

效果图

bootstrap02导航菜单的更多相关文章

  1. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  2. php后管理分类导航菜单

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content=&quo ...

  3. HTML+CSS代码橙色导航菜单

    效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http:/ ...

  4. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  5. jq倾斜的动画导航菜单

    效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...

  6. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  7. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  8. 前端框架bootstrap 表单和导航菜单的 Demo（第二篇）

    表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  9. SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单

    企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...

随机推荐

  1. 【Xamarin开发 Android 系列 4】 Android 基础知识

    原文:[Xamarin开发 Android 系列 4] Android 基础知识 什么是Android? Android一词的本义指“机器人”,同时也是Google于2007年11月5日宣布的基于Li ...

  2. perl unload utf-8 oracle 数据库

    perl unload utf-8 Oracle [oracle@oadb sbin]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Produc ...

  3. Android 性能优化 四 布局优化merge标签的使用

    小白:之前分享了ViewStub标签的使用,Android还有其他优化布局的方式吗? 小黑:<merge />标签用于减少View树的层次来优化Android的布局.先来用个例子演示一下: ...

  4. sharepoint 2010 如何使用sharepoint多媒体视频播放media webpart功能

    转:http://www.cfanz.cn/?c=article&a=read&id=40449 在sharepoint 2010中,有一个新的功能,支持在页面上播放视频.主要是通过一 ...

  5. OpenJDK 8 on Windows

    OpenJDK官网提供了非Windows已编译版本的下载. JDK 8的Windows安装版本目前网上提供有两种版本: 1.RED HAT发布的OpenJDK 8 Windows版 2.ojdkbui ...

  6. 城市连动纯js代码DEMO

    前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  7. poj 1039 Pipe（几何基础）

    Pipe Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9932   Accepted: 3045 Description ...

  8. 如何在 Linux 终端下创建新的文件系统/分区

    在 Linux 中创建分区或新的文件系统通常意味着一件事:安装 Gnome Parted 分区编辑器(GParted).对于大多数 Linux 用户而言,这是唯一的办法.不过,你是否考虑过在终端创建这 ...

  9. 博客搬家到 http://fresky.github.io/ - Visual Studio的插件Pdbproj可以把pdb转换成C++项目

    博客搬到了Dawei XU,请各位看官挪步.最新的一篇是:Visual Studio的插件Pdbproj可以把pdb转换成C++项目.

  10. git与svn的区别-小结一下

    1)Git是分布式的,SVN不是: 这 是GIT和其它非分布式的版本控制系 统,例如SVN,CVS等,最核心的区别.好处是跟其他同事不会有太多的冲突,自己写的代码放在自己电脑上,一段时间后再提交.合并 ...