Bootstrap-container |学习笔记

简介: 快速学习 Bootstrap-container

开发者学堂课程【移动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>

呈现如下效果:

image.png

相关文章
|
2月前
|
前端开发 JavaScript 容器
BootStrap学习笔记
这篇文章是关于Bootstrap框架的学习笔记,涵盖了Bootstrap的下载与使用、布局容器和栅格网格系统的使用方法、常用样式(
BootStrap学习笔记
|
5月前
|
前端开发
bootstrap组件
bootstrap组件
|
移动开发 前端开发 JavaScript
Bootstrap4
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
108 0
|
开发框架 前端开发 JavaScript
教你快速安装Bootstrap
教你快速安装Bootstrap
|
前端开发
Bootstrap——安装
Bootstrap——安装
119 0
|
前端开发 开发者
Bootstrap-组件 |学习笔记
快速学习 Bootstrap-组件
110 0
|
开发框架 前端开发 JavaScript
|
前端开发 JavaScript CDN
Bootstrap教程(2)--安装Bootstrap
本文目录 1. 版本选择 2. 使用方式 3. 安装方法 4. 验证下
349 0
Bootstrap教程(2)--安装Bootstrap
|
前端开发 JavaScript
Bootstrap教程(1)--为何要学习Bootstrap
本文目录 1. Bootstrap是什么 2. 为何要学习Bootstrap 3. Bootstrap历史地位 4. 小结
165 0
|
Web App开发 前端开发 JavaScript
Bootstrap系列 -- 1. 如何使用Bootstrap
一. Bootstrap 简介   Bootstrap 是一个前端框架,使用Bootstrap可以做出很多漂亮的页面,中文官网:http://www.bootcss.com/    二. Bootstrap核心    Bootstrap核心是Bootstrap.
1235 0