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>


相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
7月前
|
前端开发 JavaScript 数据处理
bootstrap实现分页(实例)
bootstrap实现分页(实例)
64 0
|
7月前
|
机器学习/深度学习 前端开发 自动驾驶
【视频】什么是Bootstrap自抽样及应用R语言线性回归预测置信区间实例|数据分享
【视频】什么是Bootstrap自抽样及应用R语言线性回归预测置信区间实例|数据分享
|
7月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
261 0
|
前端开发 JavaScript 索引
前端|Bootstrap 实例 - 简单的轮播插件
前端|Bootstrap 实例 - 简单的轮播插件
250 0
|
前端开发
使用Bootstrap框架写的一个小实例
今天学习了一下Bootstrap框架,,写一个小实例练练手,感受一下bootstrap兼容三端的强大。
100 0
使用Bootstrap框架写的一个小实例
|
JSON 前端开发 JavaScript
Spring之路(32)–SpringMVC+SpringJDBC+jQuery+Bootstrap博客系统完整实例
本文目录 1. 前情回顾 2. 概述 3. 新建项目 4. 新建包及目录、文件 5. 完整开发过程 5.1 封装数据对象 5.2 封装数据访问层,并注册为bean 5.3 编写服务类,封装对博客的操作方法 5.4 编写控制器,提供http接口 5.5 编写html页面,调用api接口完成操作 5.6 编写springmvc-config.xml 5.7 编写web.xml 6. 测试
272 0
Spring之路(32)–SpringMVC+SpringJDBC+jQuery+Bootstrap博客系统完整实例
|
JSON 前端开发 JavaScript
Spring之路(26)–Spring Restful+jQuery+Bootstrap开发博客系统实例(前端开发篇)
本文目录 1. 概述 2. 配置访问静态资源 3. 建立html网页 4. 浏览博客功能实现 5. 删除博客实现 6. 新增博客实现 7. 编辑博客实现
198 0
Spring之路(26)–Spring Restful+jQuery+Bootstrap开发博客系统实例(前端开发篇)
|
SQL XML JSON
Spring之路(25)–Spring Restful+jQuery+Bootstrap开发博客系统实例(API后端开发篇)
本文目录 1. 背景 2. 新建项目 3. 导入jar包 4. 修改web.xml加载spring配置 5. 新建springmvc-config.xml,配置容器信息 6. 添加数据库操作类DbHelper 7. 添加博客服务类BlogService与数据对象BlogBo 8. BlogController实现Restful API 9. 浏览器简单测试 10.总结
141 0
Spring之路(25)–Spring Restful+jQuery+Bootstrap开发博客系统实例(API后端开发篇)
|
SQL 前端开发 Java
Spring之路(23)–SpringMVC+Bootstrap开发博客系统实例(其他功能实现)
本文目录 1. 前言 2.新增博客功能实现 3. 编辑博客功能的实现 4. 删除博客功能实现 5. 总结
203 0
Spring之路(23)–SpringMVC+Bootstrap开发博客系统实例(其他功能实现)
|
前端开发 Java Spring
Spring之路(22)–SpringMVC+Bootstrap开发博客系统实例(引入Boostrap并实现浏览博客页面)
本文目录 1.背景 2. 浏览博客功能实现 3. 导入Bootsrap 4. 利用Bootstrap样式美化表格 5. 利用Bootstrap添加导航栏 6. 添加修改、删除链接 7. 总结
290 0
Spring之路(22)–SpringMVC+Bootstrap开发博客系统实例(引入Boostrap并实现浏览博客页面)