bootstrap阶段测验【答案】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</head>
<body>
<nav class="navbar navbar-default header navbar-inverse">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
LOGO
</a>
</div>
<ul class="nav navbar-nav header-nav">
<li><a href="#">首页</a></li>
<li><a href="#">成功案例</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
康复中心<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="active">
<a href="#">门诊部</a>
</li>
<li>
<a href="#">运动部</a>
</li>
<li>
<a href="#">手脚部</a>
</li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
<form action="" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入关键词"> <span class="input-group-btn">
<button type="submit" class="btn btn-primary">搜索</button> </span>
</div>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="img/1.jpg" class="img-thumbnail"/>
<h4 class="text-muted">美丽的丽江</h4>
<p>丽江古城内的街道依山傍水修建,以红色角砾岩铺就,有四方街、木府、五凤楼等景点。 [2] 丽江为第二批被批准的中国历史文化名城之一,是中国以整座古城申报世界文化遗产获得成功的两座古城之一。</p>
<p>
<a href="#" class="btn btn-primary">了解更多</a>
<a href="#" class="btn btn-default">游客体验</a>
</p>
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="img-thumbnail"/>
<h4 class="text-muted">美丽的大理</h4>
<p>地处低纬高原,四季温差不大,干湿季分明,以低纬高原季风气候为主,境内以蝴蝶泉、苍山、洱海、大理古城、崇圣寺三塔等景点最有代表性。是中国西南边疆开发较早的地区之一。</p>
<p>
<a href="#" class="btn btn-primary">了解更多</a>
<a href="#" class="btn btn-default">游客体验</a>
</p>
</div>
<div class="col-md-4">
<img src="img/3.jpg" class="img-thumbnail"/>
<h4 class="text-muted">美丽的三亚</h4>
<p>三亚是具有热带海滨风景特色的国际旅游城市 [4] ,又被称为“东方夏威夷”。 [5] 2016年6月14日,中国科学院对外发布《中国宜居城市研究报告》,三亚宜居指数在全国40个城市中位居第三。</p>
<p>
<a href="#" class="btn btn-primary">了解更多</a>
<a href="#" class="btn btn-default">游客体验</a>
</p>
</div>
</div>
</div>
<div class="container">
<h3 class="text-primary">
价格详情
<i class="glyphicon glyphicon-certificate text-primary"></i>
</h3>
<form>
<table class="table table-bordered">
<tr>
<td class="text-center">地点</td>
<td class="text-center">人数</td>
<td class="text-center">团购价格</td>
<td class="text-center">自由行</td>
<td class="text-center">自由行价格</td>
</tr>
<tr>
<td class="text-center">丽江</td>
<td class="text-center">5-10人</td>
<td class="text-center">200元/位</td>
<td class="text-center">1-2人</td>
<td class="text-center">300元/位</td>
</tr>
<tr>
<td class="text-center">丽江</td>
<td class="text-center">5-10人</td>
<td class="text-center">200元/位</td>
<td class="text-center">1-2人</td>
<td class="text-center">300元/位</td>
</tr>
<tr>
<td class="text-center">丽江</td>
<td class="text-center">5-10人</td>
<td class="text-center">200元/位</td>
<td class="text-center">1-2人</td>
<td class="text-center">300元/位</td>
</tr>
<tr>
<td class="text-center">丽江</td>
<td class="text-center">5-10人</td>
<td class="text-center">200元/位</td>
<td class="text-center">1-2人</td>
<td class="text-center">300元/位</td>
</tr>
<tr>
<td class="text-center">丽江</td>
<td class="text-center">5-10人</td>
<td class="text-center">200元/位</td>
<td class="text-center">1-2人</td>
<td class="text-center">300元/位</td>
</tr>
</table>
</form>
</div>
</body>
</html>
bootstrap阶段测验【答案】的更多相关文章
- bootstrap阶段测验【问题】
- day17 阶段测验
题目 1.找出/proc/meminfo文件中以s开头的行,至少用三种方式忽略大小写 有以下几种方法: [root@localhost ~]# grep -iE "^s" /pro ...
- 卡特尔16PF性格测试与答案
大学生在职业生涯规划时,必须充分注意到自己的性格和职业的适宜性.性格是指一个人在生活中形成的对现实的稳定的态度和行为方式.研究表明,性格影响着一个人的职业取向,由于性格的不同,每个人对工作和职业的态度 ...
- spring cloud连载第一篇之bootstrap context
1. Spring Cloud Context: Application Context Services(应用上下文服务) 1.1 The Bootstrap Application Context ...
- swoft| 源码解读系列二: 启动阶段, swoft 都干了些啥?
date: 2018-8-01 14:22:17title: swoft| 源码解读系列二: 启动阶段, swoft 都干了些啥?description: 阅读 sowft 框架源码, 了解 sowf ...
- Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)
在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...
- 先有Class还是先有Object?
先有Class还是先有Object? Java的对象模型中: 所有的类都是Class类的实例,Object是类,那么Object也是Class类的一个实例. 所有的类都最终继承自Object类,Cla ...
- [转] Swoft HTTP 服务
转载自Go语言中文网, https://studygolang.com/articles/20667 传统架构 PHP-FPM + Nginx 传统架构中所使用的Nginx + PHP-FPM的模型中 ...
- ApacheCN Java 译文集 20211012 更新
Effective Java 中文第三版 1. 考虑使用静态工厂方法替代构造方法 2. 当构造方法参数过多时使用 builder 模式 3. 使用私有构造方法或枚类实现 Singleton 属性 4. ...
随机推荐
- Linux vps服务器国产面板wdcp的安装和使用方法
对于大多数站长来说,稳定的服务器不可或缺,这是我做网站以来的深刻体会,因为之前我在网站运营方面因这个原因吃了很多亏.在这里说出,只希望朋友们不要像我一样.在网站优化过程中,服务器因素导致排名下滑,甚至 ...
- java中的内存模型
概述 Java平台自动集成了线程以及多处理器技术,这种集成程度比Java以前诞生的计算机语言要厉害很多,该语言针对多种异构平台的平台独立性而使用的多线程技术支持也是具有开拓性的一面,有时候在开发Jav ...
- 基于稀疏表(Sparse Table)的RMQ(区间最值问题)
在RMQ的其他实现方法中,有一种叫做ST的算法比较常见. [构建] dp[i][j]表示的是从i起连续的2j个数xi,xi+1,xi+2,...xi+2j-1( 区间为[i,i+2j-1] )的最值. ...
- UI设计教程分享:让你彻底读懂字体
一份普普通通.规规矩矩的设计 一份让人印象深刻.新颖有趣的设计 差在哪?其实就差在三个字上! “优秀的设计不是每一个细节都有亮点,而是弱化其他元素,让某一个亮点最大化.” 今天“骉叔的设计心得”就来总 ...
- Window7安装tensorflow整套环境详细流程
安装tensorflow方式有好多种,为了方便编译环境以及包管理,这里采用Anaconda平台安装tensorflow. tensorflow官网:http://www.tensorflow.org/ ...
- vue 设置button disabled
<button v-bind:disabled="dis" @click="alert">button</button> dis:'' ...
- hbase 无法打开60010网页
在hbase-site.xml中添加如下节点 <property> <name>hbase.master.info.port</name> <value> ...
- 用php脚本比较MySQL两个数据库的结构差异
define('DATABASE1', 'mysql://root:password@127.0.0.1/db1'); $dbi1 = new DbMysql; $dbi1->dbh = DAT ...
- 关于 construct object opp
constructor 定义和用法 constructor 属性返回对创建此对象的数组函数的引用. 语法 object.constructor 实例 例子 1 在本例中,我们将展示如何使用 const ...
- Python开课复习-10/10
1. 什么时匿名函数def 定义 的是有名函数:特点是可以通过名字重复调用 def func(): #func = 函数的内存地址 pass匿名函数就是没有名字的函数:特点是只能在定义时使用一次 2. ...