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-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>

时间: 2024-09-20 20:10:10

Bootstrap实例(实习第3天)的相关文章

结合实例实习F#(三)--理解函数式语言中的函数

前两篇我主要说了些F#中基本的语法,今天我接着来说说函数,函数在函数式编程中起着非常重要的作用,可以夸张一点来说,如果你了解并能熟练应用函数,你就可以向别人说"我精通函数式编程了". 经常有人觉得F#难懂难用,我觉得一部分原因是F#中的函数接口(这里的接口指的是function signature, 我习惯叫它函数接口,如果对您阅读带来什么不便,请见谅). 看起来和我们平常熟悉的很不一样(比如C#),导致一些朋友在尝鲜阶段遇到困难,进而觉得其难懂难用,最后彻底将F#打入冷宫.希望下面的

Bootstrap菜单按钮及导航实例解析_javascript技巧

下拉菜单 特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-tog

Bootstrap 折叠(Collapse)插件用法实例详解_javascript技巧

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.下面通过本文给大家介绍Bootstrap 折叠(Collapse)插件用法实例,一起看看吧! 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时,也需要在您的 Bootst

AngularJS Bootstrap详细介绍及实例代码_AngularJS

AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstrap教程. Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.

Bootstrap 网站实例之单页营销网站_javascript技巧

我们已经掌握了很多实用 Bootstrap 的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型介绍性传送带图片展示区,配有自定义的响应式欢迎信息: □ 一个客户留言区,显示为带标题的图片墙,就像砖垒的一样: □ 一个功能清单,使用大号 Font Awesome 图标: □ 一个带有自定义价目表的注册区: □ 一个带动态滚动的 ScrollSpy 导航条. 1.概况 有一位潜在客户联系我们,她深

Bootstrap弹出带合法性检查的登录框实例代码【推荐】_javascript技巧

最近做了一个项目其中有项目需求涉及到访问控制,在访问需要登录才能使用的页面或功能时,会弹出登录框: 效果如下: 图 1-点击用户名时,如未登录弹出登录框 对这个功能的详细描述: 不涉及到登录时,登录框隐藏 涉及到登录时,登录框弹出到页面左上角 登陆成功后登录框隐藏 实现思路: 在body结束标签之前插入登录的div,设其定位方式为absolute,位置在左上角. 登录框默认的display属性为none.触发登录时,将该属性改为block 附上示例代码: <!DOCTYPE html> <

Bootstrap所支持的表单控件实例详解_javascript技巧

 Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.

Bootstrap布局组件应用实例讲解_javascript技巧

本文实例介绍了Bootstrap布局组件应用实践,分享给大家供大家参考,具体内容如下 字体图标的应用示例 <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes"></span> </button> 下拉菜单示例 <div class="dro

Bootstrap对话框使用实例讲解_javascript技巧

使用模态框的弹窗组件需要三层 div 容器元素 分别为 modal(模态声明层) dialog(窗口声明层) content(内容层) 在内容层里面,还有三层,分别为 header(头部). body(主体). footer(注脚)  一个简单的对话框登陆/注册例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D