Bootstrap简单Demo(2015年05月-18日)
2024-08-28 03:05:06
Bootstrap的简单使用
1、Bootstrap是什么?
这是Bootstrap官网上对它的描述:Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目
2、Bootstrap的使用需求
1.Bootstrap是一个快速开发Web应用程序的前端框架,并且有丰富的组件、插件,可以用于我们快速开发出用户友好的WEB界面
2.支持移动式设备响应,Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好。
3、Bootstrap的简单使用案例
以下案例是对公司订餐系统的简单仿写
导航部分代码如下:
<!--nav为Bootstrap的导航组件-->
<nav class="navbar navbar-inverse" style="margin-bottom: 0px;">
<!--container-fluid代表一个占据100%大小的容器 -->
<div class="container-fluid">
<!--navbar-header表示一个导航的头部部分 -->
<div class="navbar-header header">
<!--
自适应隐藏导航展开按钮
class="navbar-toggle collapsed"代表折叠的样式
data-target="#bs-example-navbar-collapse-1"代表折叠的目标,和下面的div中,设置的id="bs-example-navbar-collapse-1"对应
-->
<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>
<!--一定要加上id="bs-example-navbar-collapse-1"属性和上面button的data-target="#bs-example-navbar-collapse-1"属性对应,表示这个div是折叠的目标 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">917<span class="sr-only">(current)</span></a></li>
<li><a href="#">大西豪</a></li>
<li><a href="#">都城</a></li>
<li><a href="#">餐餐乐</a></li>
<li><a href="#">湘语</a></li>
<li><a href="#">邱家</a></li>
<li><a href="#">面点王</a></li>
<li><a href="#">随机</a></li>
<li><a href="#">查看</a></li>
</ul>
<!--
搜索框,navbar-form表示导航栏的form表单
-->
<form class="navbar-form navbar-left" role="search" style="margin-left: 300px;">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--/.collapse-->
</div><!--/.container -->
</nav>
菜单显示部分代码如下:
<!--图片排列利用bootstrap的栅格系统实现-->
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="container col-sm-6 col-md-4" style="width: 300px;">
<div class="thumbnail">
<img src="data:images/a.png" class="img-responsive" style="height: 239px;">
<div class="caption">
<p align="center"><strong>尖椒拆骨肉</strong></p>
</div>
</div>
</div>
</div>
</div> <div class="col-md-3">
<div class="row">
<div class="container col-sm-6 col-md-4" style="width: 300px; ">
<div class="thumbnail">
<img src="data:images/b.png" class="img-responsive" style="height: 239px;">
<div class="caption">
<p align="center"><strong>水煮牛肉</strong></p>
</div>
</div>
</div>
</div>
</div> <div class="col-md-3">
<div class="row">
<div class="container col-sm-6 col-md-4" style="width: 300px; ">
<div class="thumbnail">
<img src="data:images/c.png" class="img-responsive" style="height: 239px;">
<div class="caption">
<p align="center"><strong>清蒸开屏皖鱼盖浇饭(配蛋脯)
</strong></p>
</div>
</div>
</div>
</div>
</div> <div class="col-md-3">
<div class="row">
<div class="container col-sm-6 col-md-4" style="width: 300px; ">
<div class="thumbnail">
<img src="data:images/d.png" class="img-responsive" style="height: 239px;">
<div class="caption">
<p align="center"><strong>杭州油淋鸡
</strong></p>
</div>
</div>
</div>
</div>
</div>
</div><!--/.row -->
4、效果
在电脑上显示如图:
在手机端显示的效果如下:
最新文章
- new/delete重载
- SQL Sever无法打开链接对话框,未将对象引用设置到对象的实例。(AppIDPackage)
- 使用Azure REST API创建虚拟机
- host Object和native Object的区别
- 笔记整理之 Bulk Insert
- 用vc生成可被python调用的dll文件
- JS学习笔记12_优化
- StdRandom.java
- JavaScript constructor 属性
- (hdu)1160 FatMouse&#39;s Speed
- statspack系列7
- Laravel No such file or directory in /bootstrap/autoload.php on line 17
- 一年开发ASP.NET MVC4项目经验总结
- CodeForces 687C The Values You Can Make
- jquery.tmplate使用心得
- Delphi子窗体随主窗体大小而变化
- Android studio中导入SlidingMenu问题
- Python 爬取bangumi网页信息
- 有关vuex的问题
- java初学网站
热门文章
- MySQL BINARY和BIT类型
- Zabbix3.0完整部署
- Klist
- 【转】selenium简介及安装方法
- TC SRM 663 div2 B AABB 逆推
- Codeforces Gym 100733J Summer Wars 线段树,区间更新,区间求最大值,离散化,区间求并
- osg 笔记一 (转)
- ListView上移 和下移
- [MEAN Stack] First API -- 7. Using Route Files to Structure Server Side API
- 设计一个算法,输出从u到v的全部最短路径(採用邻接表存储)