Bootstrap实例(实习第3天)

简介: <!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<style text="css">
</style>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">管理系统</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li class="disabled"><a href="#">业务功能</a></li>
            <li><a href="#">信息建立</a></li>
            <li><a href="#">信息查询</a></li>
            <li><a href="#">信息管理</a></li>
            <li class="divider"></li>
            <li class="disabled"><a href="#">系统功能</a></li>
            <li><a href="#">设置</a></li>
          </ul>
        </li>
		 <li><a href="#">帮助</a></li>
      </ul>
	  <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="账号...">
        </div>
		  <div class="form-group">
          <input type="password" class="form-control" placeholder="密码...">
        </div>
        <button type="submit" class="btn btn-default">登陆</button>
      </form>
   </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>


目录
相关文章
|
4月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
52 0
|
10月前
|
前端开发 JavaScript 索引
前端|Bootstrap 实例 - 简单的轮播插件
前端|Bootstrap 实例 - 简单的轮播插件
213 0
|
前端开发
使用Bootstrap框架写的一个小实例
今天学习了一下Bootstrap框架,,写一个小实例练练手,感受一下bootstrap兼容三端的强大。
使用Bootstrap框架写的一个小实例
|
SQL 前端开发 Java
Spring之路(23)–SpringMVC+Bootstrap开发博客系统实例(其他功能实现)
本文目录 1. 前言 2.新增博客功能实现 3. 编辑博客功能的实现 4. 删除博客功能实现 5. 总结
174 0
Spring之路(23)–SpringMVC+Bootstrap开发博客系统实例(其他功能实现)
|
前端开发 Java Spring
Spring之路(22)–SpringMVC+Bootstrap开发博客系统实例(引入Boostrap并实现浏览博客页面)
本文目录 1.背景 2. 浏览博客功能实现 3. 导入Bootsrap 4. 利用Bootstrap样式美化表格 5. 利用Bootstrap添加导航栏 6. 添加修改、删除链接 7. 总结
237 0
Spring之路(22)–SpringMVC+Bootstrap开发博客系统实例(引入Boostrap并实现浏览博客页面)
|
存储 Java 关系型数据库
Spring之路(21)–SpringMVC+Bootstrap开发博客系统实例(数据库模块实现)
本文目录 1. 背景 2. 导入jar包 3. 编写数据库操作组件 4. 编写博客数据类 5. 编写博客操作服务类 6. 总结
128 0
|
XML Java 数据库
Spring之路(20)–SpringMVC+Bootstrap开发博客系统实例(项目主体结构实现)
本文目录 1. 前言 2. 新建项目 3. 修改web.xml配置 4. 新建springmvc-config.xml文件 5. 根据规划的URL实现BlogController类 6. 根据规划的URL实现jsp页面类 7. 验证下 8. 总结
172 0
Spring之路(20)–SpringMVC+Bootstrap开发博客系统实例(项目主体结构实现)
|
架构师 Java 程序员
Spring之路(19)–SpringMVC+Bootstrap开发博客系统实例(数据库与URL设计篇)
本文目录 1. 概述 2. 数据库设计 3. URL设计 4. 遵守规范 5. 总结
141 0
Spring之路(19)–SpringMVC+Bootstrap开发博客系统实例(数据库与URL设计篇)
|
前端开发 Java 关系型数据库
Spring之路(18)–SpringMVC+Bootstrap开发博客系统实例(需求分析篇)
本文目录 1. 背景 2. 项目名称 3. 项目技术储备 4. 需求有哪些 5. 工作有哪些
186 0