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

相关文章
|
5月前
|
前端开发 JavaScript 容器
BootStrap学习笔记
这篇文章是关于Bootstrap框架的学习笔记,涵盖了Bootstrap的下载与使用、布局容器和栅格网格系统的使用方法、常用样式(
BootStrap学习笔记
|
8月前
|
前端开发 JavaScript 容器
Bootstrap4 Jumbotron
Bootstrap 4 Jumbotron 是一个用于展示重要信息和功能的模态框,通常用于页面头部或页面中部的重点展示区域。它具有全屏宽度的布局,可以包含文本、图像、按钮等元素,并且可以自动适应不同的屏幕尺寸。Jumbotron 是一个灵活的组件,可以用于多种不同的场景,例如介绍公司或产品、展示广告或促销信息、提供导航或搜索功能等。
88 9
|
前端开发 索引 容器
bootstrap4-部分总结
bootstrap4-部分总结。
|
前端开发
bootstrap
bootstrap
67 0
|
移动开发 前端开发 JavaScript
Bootstrap4
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
133 0
|
开发框架 前端开发 JavaScript
教你快速安装Bootstrap
教你快速安装Bootstrap
|
前端开发
Bootstrap——安装
Bootstrap——安装
134 0
|
前端开发
bootstrap练习
bootstrap练习
120 0
|
前端开发 JavaScript CDN
Bootstrap教程(2)--安装Bootstrap
本文目录 1. 版本选择 2. 使用方式 3. 安装方法 4. 验证下
383 0
Bootstrap教程(2)--安装Bootstrap
|
前端开发 容器
一篇文章学会使用BootStrap
一篇文章学会使用BootStrap
270 0
一篇文章学会使用BootStrap