<!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. 李洪强iOS开发Swift篇---12_NSThread线程相关简单说明

    李洪强iOS开发Swift篇---12_NSThread线程相关简单说明 一 说明 1)关于多线程部分的理论知识和OC实现,在之前的博文中已经写明,所以这里不再说明. 2)该文仅仅简单讲解NSThre ...

  2. ANDROID_MARS学习笔记_S05_005_方向传感器

    import android.app.Activity; import android.content.Context; import android.hardware.Sensor; import ...

  3. CopyOnWriteArrayList与Collections.synchronizedList的性能对比

    列表实现有ArrayList.Vector.CopyOnWriteArrayList.Collections.synchronizedList(list)四种方式. 1 ArrayList Array ...

  4. Learning WCF Chapter1 Exposing Multiple Service Endpoints

    So far in this chapter,I have shown you different ways to create services,how to expose a service en ...

  5. org.hibernate.LazyInitializationException: failed to lazily initialize

    今天搞了一上午,都在解决这个问题:org.hibernate.LazyInitializationException: failed to lazily initialize 原因很简单,是在非法的s ...

  6. xcode5.1 cocoapods报错

    Xcode升级到5.1了,apple默认让所有app都通过64位编译器编译,所以会报各种错误信息,关闭64位编译就好了. 选中Targets—>Build Settings—>Archit ...

  7. Wildfly 中支持jersey，并websocket的默认配置修改。

    以下为在jboss安装相对路径来写的.1.\domain\configuration\domain.xml修改内容: 注释关键字jaxrs存在的四行.修改后如下: <!--<extensi ...

  8. C#面向对象的三大特征

    一,封装:我们可以把世界上任何一个东西都看作为一个对象,那么我们这里以人为例,一个人就肯定是一个对象了.那么封装是什么呢?封装就是这个人要完成一件事情,他所需要的任何工具都带在了自己的身上,所需要的技 ...

  9. C#开发移动平台iOS、Android 与Windows

    1.Xamarin http://www.csdn.net/article/2014-02-28/2818585-Xamarin-CSDN-mobile-develop

  10. EF中使用存储过程

    1.存储过程使用out参数返回结果 存储过程: create or replace procedure PROC_GETSEQ(tbname varchar,ReturnNum out number) ...