Bootstrap简单Demo(2015年05月-18日)
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、效果
在电脑上显示如图:
在手机端显示的效果如下:
Bootstrap简单Demo(2015年05月-18日)的更多相关文章
- 2015年8月18日,杨学明老师《技术部门的绩效管理提升(研讨会)》在中国科学院下属机构CNNIC成功举办!
2015年8月18日,杨学明老师为中国网络新闻办公室直属央企中国互联网络中心(CNNIC)提供了一天的<技术部门的绩效管理提升(研讨会)>培训课程.杨学明老师分别从研发绩效管理概述.研发绩 ...
- Git学习(二)(2015年11月18日)(2016年1月29日)
2015年11月18日Git学习: .Shell 删除文件夹及其所有文件 rd/s/q 文件目录 ---------------当前为先创建本地Git库后与网上Git服务器关联------------ ...
- Bootstrap之Footer页尾布局(2015年05月28日)
直接上页尾部分的代码: <!--采用container-fluid,使得整个页尾的宽度为100%,并设置它的背景色--><footer class="container-f ...
- Bootstrap插件之Carousel轮播效果(2015年-05月-21日)
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...
- 初识CSS3之媒体查询(2015年05月31日)
一.什么是媒体查询 媒体查询是面向不同设备提供不同样式的一种实现方式,它可以为每种类型的用户提供最佳的体验,也是响应式设计的实现方式. 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各 ...
- 初识Less(2015年05月23日)
因为最近在研究Bootstrap,然后才了解到Less,听说Less很强大,又听说Bootstrap+Less会更搭,所以就决定也顺带了解下Less的相关知识. come on...... 一.简介 ...
- 导航狗IT周报-2018年05月18日
原文链接:https://www.daohanggou.cn/2018/05/18/it-weekly-8/ DDoS专题 最近Web安全里的一个热点就是包括阮一峰博客在内的多个教育类IT网站被DDo ...
- 1、关于Boolean(2015年05月30日)
背景:刚在看Effective Java,看到一段关于Boolean提供一个返回实例的静态方法的例子,便去看了下Boolean的源码,发现有些内容是之前没注意到的,于是便有了下面这些. 1. Bool ...
- java之enum枚举(2015年05月28日)
背景: 今天启动了一个新的项目,由于要从之前的旧项目中拿过来一些代码,所以就看了下公司之前项目代码,发现有定义的常量类,也有枚举类,然后就在想着两者的功能差不多,那他们之间到底有什么区别呢,所以就决定 ...
随机推荐
- js隐藏
function openLoadingIcon(){ $("#dataLoading").css("display","block"); ...
- Unity3D之空间转换学习笔记(二):基础数学
这期笔记我们专注Unity提供的各种数学相关的类来学习. 时间Time API文档地址:http://docs.unity3d.com/ScriptReference/Time.html 时间加/减速 ...
- 教你50招提升ASP.NET性能(二十):认识你的循环
(31)Know your loops 招数31: 认识你的循环 for is the fastest way of iterating over a collection, foreach is a ...
- 用c#读取并分析sql2005日志
用过logExplorer的朋友都会被他强悍的功能吸引,我写过一篇详细的操作文档可以参考http://blog.csdn.net/jinjazz/archive/2008/05/19/2459692. ...
- <Android>关于EditText中setInputType和setSingleLine的冲突
近期自己开发了一个带有删除button的EditText,一方面须要设置为SingleLine,还有一方面又须要设置输入类型,起先在xml文件里设置了android:inputType类型,在自己定义 ...
- XML Helper XML操作类
写的一个XML操作类,包括读取/插入/修改/删除. using System;using System.Data;using System.Configuration;using System.Web ...
- 谷歌插件开发(实现CSDN快速登陆)
谷歌浏览器插件带来了很大的方便,于是就想着是不是也可以开发一个来用用.几经折腾下,开发了个CSDN快速 登陆的插件.下面简述一下开发的步骤. 1.开发工具:谷歌浏览器(我开发时用的是chrome 30 ...
- Line Search and Quasi-Newton Methods
Gradient Descent 机器学习中很多模型的参数估计都要用到优化算法,梯度下降是其中最简单也用得最多的优化算法之一.梯度下降(Gradient Descent)[3]也被称之为最快梯度(St ...
- 一种快速求fibonacci第n个数的算法
利用动态规则的思路,摒弃传统的递归做法,可以得到一种快速的求fibonacci第n个数的算法: ''' 求第n(从1开始)位fibonacci数 fibonacci数列前两位为0, 1. 后面每一位数 ...
- MII、RMII、GMII接口的详细介绍
转载:http://blog.csdn.net/reille/article/details/6312156 概述: MII (Media Independent Interface(介质无关接口)或 ...