开发者学堂课程【移动Web前端开发:Bootstrap-container】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8443
Bootstrap-container
内容介绍
一、Normalize.css
二、布局容器
一、Normalize.css
为了增强跨浏览器表现的一致性,使用 Normalize.css ,这是由Nicolas Gallagher 和 Jonathan Neal 维护的一个 CSS 重置样式库。
二、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class=" container">
...
</ div>
.container-fluid
类用于100%宽度,占据全部视口( viewport )的容器。
<div class=" container-fluid">
…
</div>
< ! DOCTYPE html><html lang="zh-CN">
<head>...</ head>
< ! [ endif]-->
<style>
.container{
height: 200px;
background: yellowgreen;
}
.container-fluid{
height: 200px;background: red;
}
</ head>
<body>
<! --响应式容器-->
<div class="container"></div>
<!--流式容器-->
<div class="container-fluid"></div>
<script src="../lib/iquerv/iauery.min.is"></script>
<script src="../lib/bootstrap/is/bootstrap.min.is"></script>
</ body>
< / html>
呈现如下效果: