表单：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> </head> <body> <div class="container"> <!-- class="container" 放在这里面的元素可以使它们居中--> <h1 class="panel-danger">用户登录</h1> <!-- class="form-horizontal" 设置当前表单为水平的，还可以设置其余样式class="form-xxx" 等 --> <form class="form-horizontal"> <!--文本框 class="col-md-4" 表示占用当前页面的纵向4个格 ，共有12个格子 --> <div class="form-group"> <div class="col-md-4"> <label for="exampleInputEmail1">用户名:</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名 / email"> </div> </div> <!--密码框 --> <div class="form-group"> <div class="col-md-4"> <label for="exampleInputPassword1">密码:</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码"> </div> </div> <!-- 文件上传 --> <div class="form-group"> <div class="col-md-4"> <label for="exampleInputFile">请选择文件：</label> <input type="file" id="exampleInputFile"> </div> </div> <!--复选框 --> <div class="checkbox"> <p class="help-block">兴趣/爱好 </p> <label> <input type="checkbox"> 复选框一 </label> <label> <input type="checkbox"> 复选框二 </label> </div> <br /> <!-- 提交（当前表当）按钮 class="btn btn-primary" 设置提交按钮的样式 --> <div class="container"> <div class="form-group"> <button type="submit" class="btn btn-primary"> 提 交 </button> </div> </div> </form> </div> </body> </html>
运行效果：
GCDCC$0}9$N@RC9{QJF.png)
响应式导航菜单：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入jQuery以及bootstrap的类库 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<!-- bootstarp 的导航栏默认高度为 50px
class="nav navbar-inverse" 设置导航的条样式（当前北京为黑色） 还可以写成class="nav navbar-default"
role="navigation" 表示当前div 已设置为导航栏
class="container-fluid" 也就是告诉导航栏采用的是流布局方式
navbar-fixed-top 设置导航条始终显示在页面顶部 ，对应的navbar-fixed-bottom始终显示在下面
-->
<div class="nav navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!-- 隐藏按钮当页面小于默认为768像素时，隐藏响应式布局里的内容，显示此按钮
data-target=".nav-collapse" 找的是下面设置响应布局的 div
-->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span> <!--每一个”span 标签就是一个小横线 这里的按钮就是由3小横线组成“-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 添加一个logo 因为导航栏的高度默认为50pk 为了以防外一将logo的高度设为50px-->
<a href="#" class="navbar-brand">
<img src="img/{1Y(FB52``7)ZKN(0EYQUZY.jpg" style="height: 50px; margin-top:-15px;"/>
</a>
</div>
<!--
class="collapse nav-collapse" 将当前div里的模块变成响应式布局
-->
<div class="collapse navbar-collapse">
<!-- 导航列表-->
<ul class="nav navbar-nav">
<!-- class="active" 为默认被选中的菜单 -->
<li class="active"><a href="#">首页</a></li>
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
</ul>
<!--导航的搜索框
class="navbar-form navbar-right" 第一个类标签标记为搜索栏
第二个"navbar-right"设置为靠右显示
-->
<div class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="请输入关键字"/>
<button class="btn btn-primary">搜索</button>
<a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">登 陆</a>
<a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">注 册</a>
</div>
</div>
</div>
</div>
<!--
使用bootstrap框架的时候，把js文件放在叶下面引入可以提高页面的加载效率
因为bootstrap框架要依赖于jQuery所以在 引入 js文件前要先把jQuery.js引入进来
-->
<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</body>
</html>
运行效果：
将页面宽度调成小于默认宽度：
可以点击按钮（就是右上角3条小白条）进行显示和隐藏
时间： 2024-08-28 06:09:08