响应式 Web 设计 - 框架

最新推荐文章于 2021-04-06 20:06:28 发布

冷月醉雪

最新推荐文章于 2021-04-06 20:06:28 发布

阅读量350

点赞数

分类专栏： CSS3 文章标签： Bootstrap 框架

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80828244

版权

CSS3 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本章节为大家介绍响应式 Web 设计框架 Bootstrap。

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Colum 1</h3>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
	  <p>Ut enim and minim veniam， quis nostrud exercitatioin ullamco laboris..</p>
    </div>
    <div class="col-sm-4">
       <h3>Colum 2</h3>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
	  <p>Ut enim and minim veniam， quis nostrud exercitatioin ullamco laboris..</p>
    </div>
    <div class="col-sm-4">
		<h3>Colum 3</h3>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
	  <p>Ut enim and minim veniam， quis nostrud exercitatioin ullamco laboris..</p>
    </div>
  </div>
</div>

</body>
</html>

参考：

https://www.yuque.com/docs/share/a97d98de-33f6-4c9d-b16c-f4a88fe1ffe9