<!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. [wikioi]数的划分

    http://wikioi.com/problem/1039/ 划分型DP.最终的思路是,F[i][j]表示i分成j份,如果分出来的有1,那么去掉1,就是F[i-1][j-1]:如果没有1,那就都减1 ...

  2. Android ListView异步加载数据

    1.主Activity public class MainActivity extends Activity { private ListView listView; private ArrayLis ...

  3. 【HDOJ】1239 Calling Extraterrestrial Intelligence Again

    这题wa了很多词,题目本身很简单,把a/b搞反了,半天才检查出来. #include <stdio.h> #include <string.h> #include <ma ...

  4. Linux libtins 库安装教程

    因为工作原因需要用到libtins网络库, 所以今天去装一下. 很尴尬,由于本人对linux理解比较浅, 所以在中途遇到了一些问题. 虽然只是简单的安装步骤,但是阻挡不了自己菜啊. 一.  下载lib ...

  5. 如何区分Shapefile，Coverage，Geodatabase（转载）

    转自:http://www.cnblogs.com/linhugh/archive/2012/04/06/2435266.html 在过去20年中,矢量数据模型是GIS中变化最大的方面,例如,ESRI ...

  6. PHP重构之函数上移

    参考<重构> <?php abstract class Customer { public function addBill($date, $amount) { echo " ...

  7. 我对Burnside定理的理解

    我想了想,发现可以证明burnside定理. 置换:n个元素1,2,-,n之间的一个置换表示1被1到n中的某个数a1取代,2被1到n中的某个数a2取代,直到n被1到n中的某个数an取代,且a1,a2, ...

  8. Devexpress之dxErrorProvider

    DXErrorProvider:错误提示控件,用法类似于VS的winform控件中的ErrorProvider. 下面为一个使用实例,验证文本框输入是否为数字: ①.添加System.Text.Reg ...

  9. PowerDesigner使用总结 转

    PowerDesigner使用总结 (友情提示:本博文章欢迎转载,但请注明出处:陈新汉,http://www.blogjava.net/hankchen)一.使用PowerDesigner生成HTML ...

  10. Yii框架tips（转）

    yii的一些小的技巧 http://www.yiichina.com/topic/151 db组件 'schemaCachingDuration'=>3600, 为什么不起做用?需要开缓存 如何 ...