这里有新鲜出炉的 Bootstrap 入门,程序狗速度看过来!
Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/html 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范,它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎,一直是 GitHub 上的热门开源项目,包括 NASA 的 MSNBC(微软全国广播公司)的 Breaking News 都使用了该项目。
这篇文章主要介绍了 bootstrap 导航栏、下拉菜单、表单的简单应用实例解析, 非常不错,具有参考借鉴价值,需要的朋友参考下吧
制作效果图如下:
代码如下(以后做东西可以改改就能直接用):
- <!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://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
- </head>
- <body>
- <nav class="navbar navbar-default" role="navigation">
- <div class="container-fluid">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
- data-target="#bs-example-navbar-collapse-1">
- <span class="sr-only">
- Toggle navigation
- </span>
- <span class="icon-bar">
- </span>
- <span class="icon-bar">
- </span>
- <span class="icon-bar">
- </span>
- </button>
- <a class="navbar-brand" href="#">
- 某管理系统
- </a>
- </div>
- <!-- Collect the nav links, forms, and other content for toggling -->
- <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>
- </ul>
- <form class="navbar-form navbar-right" role="search">
- <div class="form-group">
- <input type="text" class="form-control" placeholder="username">
- <input type="password" class="form-control" placeholder="password">
- </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.2.0/js/bootstrap.min.js'>
- </script>
- </body>
- </html>
以上所述是小编给大家介绍的 bootstrap 导航栏、下拉菜单、表单的简单应用实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0618/328830.html