程序博客网 > 《云计算安全》

bootstrap 学习之路7

来源：互联网 发布：《云计算安全》 编辑：程序博客网 时间：2024/06/11 16:49

bootstrap学了学，突然想到bootstrap其实真的很强大，网页制作不就是两部分： 1. 布局。 2. CSS 

好了。 而我们要快速开发网页，首先是网页布局，使用bootstrap的 span 。 其次使用bootstrap 的 各个组件。 再用css装饰。这样就是一个网页。 所以下面介绍一下bootstrap的组件。 当然这些官网上有，我只是实现一下。首先自己练手，其次对组件有个了解。


按照一个网站的写法，bootstrap组件包括：

1. 导航 栏和导航条。 导航栏是要宽一些，可以多加些自定的元素。导航条就是一条导航的导航栏。分别是 .nav 和 .navbar

2. 下拉菜单，导航条要包括下拉菜单的 .dropdown

3. 面包屑，其实说白了就是类似导航栏的东西，很多网站都有，一会看例子理解

4. 排版（网页正文），包括hero-unit 和 滚动图片等，前面介绍过，这里不做介绍。

        5. 按钮组、分页

6. 警告框

7. 进度条

8. 标签和徽章


二话不说，上代码


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./bootstrap/css/bootstrap-responsive.min.css" />


<!--这里加上想用的css-->
<style type="text/css">



.navbar{
margin-bottom: 0px;
}


</style>
</head>


<body>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">

<ul class="nav" >
<li class="active"><a href="#">home</a></li>
<li><a href="#">content</a></li>
<li><a href="#">about</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"><a href="#">二级菜单</a>
<ul class="dropdown-menu" >
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
</li>

</ul>



</div>

</div>
</div>


<ul class="breadcrumb">
 <li><a href="#">首页</a> <span class="divider">/</span></li>
 <li><a href="#">组件</a> <span class="divider">/</span></li>
 <li class="active">按钮</li>
</ul>
<div class="container">




<div class="row-fluid">
<div class="span4">
<h3>按钮组</h3>
<!--按钮组-->
<div class="btn-group">
<button class="btn">left</button>
<button class="btn">middle</button>
<button class="btn">right</button>
</div>


</div>
<div class="span4">
<h3>多维按钮组</h3>
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
</div>
<div class="btn-group">
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
</div>
</div>
</div>


<div class="span4">
<h3>分裂按钮</h3>
<!--按钮组-->
<div class="btn-group">
<button class="btn">dropdown</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</div>


</div>
</div>


<!--分页-->
<div class="pagination">
 <ul>
<li class="disabled" ><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>

 </ul>
</div>


<div class="row-fluid">
<div class="span4">
<span class="label label-success">success</span>
</div>
<div class="span4"><span class="badge badge-success">B</span></div>


<div class="span4">
<div class="alert  alert-block">
<button  type="button"  class="close"  data-dismiss="alert">×</button>
<strong>warning</strong>严重警告！
</div>
</div>
</div>

<div class="row-fluid">

<div class="span12">
<div class="progress progress-striped">
<div class="bar" style="width: 60%;"></div>
</div>
</div>
</div>


<hr />
<div class="footer">
© 2013 Company, Inc. · 
</div>
</div>
<script type="text/javascript" src="./bootstrap/thirdpart/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>  
       
</body>
</html>


注释：

1.  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"><a href="#">二级菜单</a>
<ul class="dropdown-menu" >
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
</li>

整个下拉菜单的描述，其中 第一级的  class="dropdown-toggle" data-toggle="dropdown 很重要 第二层级就是<ul class="dropdown-menu">

2. <ul class="breadcrumb"> 面包屑，看看效果一下就理解了。说再多都是废话。

3. 进度条和提示框都需要js控制，效果才好，下一章就进入到js的学习过程。


效果图：




《云计算安全》 《云计算安全》
原创粉丝点击
热门IT博客
qq群群发软件qq群群发软件
手机微信崩溃数据丢失手机微信崩溃数据丢失
windows snmp v3配置
对数据进行加工与处理
fifaonline3m数据错误
linux c编程实战 pdf
java中sdk
windows xp桌面壁纸
无间道刘建明知乎
电脑硬件状况检测软件
东莞网站快速排名优化
陕西电信云计算基地
矩阵与行列式的区别
php多媒体发布系统
兰州拉面 知乎
spss如何将数据分组
10月大非农数据
好学近乎知 pdf
ubuntu deb 依赖关系
淘宝 真皮皮带
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 办理存折 社保存折 存折消磁 公积金存折 存折挂失 存折磁条 存折利率 存折网银 银行办存折 银行存折 活期存折 定期存折 存折能在取款机取钱吗 存折取钱一定要本人吗 存折丢了怎么办 存折怎么查余额 存折可以绑定支付宝吗 存折可以转账吗 存折可以在atm机上取钱吗 存折怎么取钱 定期存折不是本人可以取吗 存折在取款机取钱步骤 存折可以在手机上转账 存折可以异地取款吗 北京医保存折 存折怎么看余额图解 阅读存折怎么填写 存折怎么转账到银行卡 存折和银行卡的区别 存折怎么办理 存折上的数字怎么看 社保存折怎么办理 医保存折怎么办理 银行存折丢了怎么办 存折怎么转账 银行存折掉了怎么办 医保存折每月多少钱 怎么查存折余额 存折余额网上查询 存折转账到银行卡 存折网上查询

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里