Bootstrap响应式设计
本文介绍如何使用Bootstrap框架创建响应式网页设计。通过简单的代码示例，展示了如何将Bootstrap添加到项目中，并解释了如何利用<div>元素及其class属性来组织内容。此外，还介绍了如何使用Bootstrap的网格系统来布局页面。
Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念
需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素
<body>
<h1>NEWS WEBSITE</h1>
<p>some text. some text. some text...</p>
...
<div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text...</p>
...
</div> <div class="news">
<h2>News headline 2</h2>
<p>some text. some text. some text...</p>
...
</div> .
..
</body>
btn class 属性
<button type="button" class="btn btn-link">Link</button>
Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。
扫一扫
1721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
