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

相关文章
|
1月前
|
前端开发
Bootstrap
【10月更文挑战第18天】
15 1
|
3月前
|
前端开发 JavaScript 容器
BootStrap学习笔记
这篇文章是关于Bootstrap框架的学习笔记,涵盖了Bootstrap的下载与使用、布局容器和栅格网格系统的使用方法、常用样式(
BootStrap学习笔记
|
6月前
|
前端开发 JavaScript 容器
Bootstrap4 Jumbotron
Bootstrap 4 Jumbotron 是一个用于展示重要信息和功能的模态框,通常用于页面头部或页面中部的重点展示区域。它具有全屏宽度的布局,可以包含文本、图像、按钮等元素,并且可以自动适应不同的屏幕尺寸。Jumbotron 是一个灵活的组件,可以用于多种不同的场景,例如介绍公司或产品、展示广告或促销信息、提供导航或搜索功能等。
76 9
|
前端开发 索引 容器
bootstrap4-部分总结
bootstrap4-部分总结。
|
6月前
|
前端开发
bootstrap组件
bootstrap组件
|
开发框架 前端开发 JavaScript
教你快速安装Bootstrap
教你快速安装Bootstrap
|
运维 Kubernetes Devops
K8S Container解析
今天,我们聊一下Kubernetes Container相关话题,什么是Container?
155 0
|
前端开发
Bootstrap——安装
Bootstrap——安装
121 0
|
前端开发
bootstrap练习
bootstrap练习
114 0
|
前端开发 开发者
Bootstrap-组件 |学习笔记
快速学习 Bootstrap-组件
115 0