您的位置:首页 - 教程 - Bootstrap - 正文
我的第一个Bootstrap页面
查看效果:http://hovertree.com/texiao/bootstrap/1/

代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 何问起</title><base target="_blank" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.1.min.js"></script>
<script src="http://hovertree.com/ziyuan/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小,查看响应式效果!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>第一列</h3>
<p><a href="http://hovertree.com/menu/bootstrap/">学的不仅是技术,更是梦想!</a></p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>第二列</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>发现问题,提出问题,有助于学习!何问起</p>
</div>
<div class="col-sm-4">
<h3>第三列</h3>
<p>学的不仅是技术,更是梦想!<a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm">原文</a></p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
</div>
<div class="row">
<div class="col-sm-8">
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持:所有的主流浏览器都支持 Bootstrap。
Internet Explorer Firefox Opera Google Chrome Safari
容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
响应式设计:Bootstrap 的响应式 <a href="http://hovertree.com/menu/css/">CSS</a> 能够自适应于台式机、平板电脑和手机。
</div>
<div class="col-sm-4"><h3>by 何问起 &copy; hovertree.com</h3></div>
</div>
</div>
</body>
</html>

评论: