根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第三节 bootstrap的布局容器

咱们大部分围绕着两个问题来叙述
是什么？
怎么做？

一.目录（总体，这门课要学的目录）（现在是第二章，bootstrap前端开发框架）

1.响应式开发

2.bootstrap前端开发框架

3.bootstrap栅格系统

4.实训案例（阿里百秀首页）

二，bootstrap前端开发框架第三节 bootstrap的布局容器

1.1 布局容器是啥

布局容器分两类

1.container类（我们之前讲过，可以看看前几节，总结下也就是说不用自己去写@media srceen 了）

2.container-fluitd类（适合做移动端的）

container类代码示例

doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><link rel="stylesheet"  href="bootstrap/css/bootstrap.min.css"><!--不要忘记引入bootstrap的样式文件-->
<title>文档</title><style type="text/css"></style>
</head><body><div class="container">123456789</div></body>
</html>

container-fluitd类代码示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><link rel="stylesheet"  href="bootstrap/css/bootstrap.min.css"><!--不要忘记引入bootstrap的样式文件-->
<title>文档</title><style type="text/css"></style>
</head><body><div class="container">123456789</div><div class="container-fluid">123456789</div></body>
</html>

container-fluitd类代码示例与对比（第一个是container，第二个是container-fluid）

总结：

bootstrap一共有两个容器，一个是 container一个是 container-fluid ，都是之前已经设定好的，所以不可修改，一个在电脑端，一个在手机端，

根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第三节 bootstrap的布局容器相关推荐

根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第二节 bootstrap前端开发框架以按钮为例（引用网站上已经设置的布局和样式）
咱们大部分围绕着两个问题来叙述是什么? 怎么做? 一.目录(总体,这门课要学的目录)(现在是第二章,bootstrap前端开发框架) 1.响应式开发 2.bootstrap前端开发框架 3.boot ...
黑马pink老师前端从入门到精通教程汇总（附源码+配套资料）
本篇内容主要是PINK老师教程汇总(主要内容如下) 1.web端布局:先讲解HTML5常用标签,接着讲解CSS3常见样式增加的H5C3新特性,新语法,最后讲解PC端品优购项目.以及CSS3动画 2d ...
电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录
放假在家没事,跟着b站黑马前端课程手把手做了个电商平台数据可视化实时监控系统.老师课讲得非常好,几乎是保姆级别,对我这种小白非常友好.在这里记录一些自己遇到的问题,欢迎批评指正. 问题记录 1.ECh ...
黑马pink老师:CSS基础总结Ⅰ
文章目录 CSS基础总结Ⅰ 1.CSS语法规范 2.CSS选择器 2.1基础选择器 2.1.1标签选择器(元素选择器) 2.1.2类选择器 2.1.3id选择器 2.1.4通配符选择器 2.2复合选择 ...
黑马Pink老师JavaScript新教程上线啦~
今天是你开工的第几天? 是谁在回味假期的美好是谁一上班就困困困是谁身在上班心还在春节假友情提示再坚持4天,就到周末了世间长假难有但周末常在无论是对于学习人还是打工人来说周末都太美好了 ...
一阶段P1~P96（PJavaScript基础语法-dom-bom-js-es6新语法-jQuery- 数据可视化echarts 黑马pink老师前端入门基础视频教程（持续更新）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 JavaScript笔记计算机编程基础 1. 变量 \color{red}{1. 变量} 1.变量 1. 变量概述 2. 变量的使 ...
B站黑马程序员pink老师讲的JavaScript代码
B站黑马程序员pink讲课的JavaScript代码(部分代码) <!DOCTYPE html> <html lang="en"> <head> ...
操作元素总结及作业1——世纪佳缘登录案例-黑马pink老师
在黑马前端教程里面,操作元素部分有这样一个案例就是世纪佳缘的登陆案例. 实现:登录的隐藏内容,以及密码框的设计,点击后颜色的变化. 简单的算法:利用JS操作元素.事件以及if分支,修改表单获取焦点和失 ...
黑马Pink老师DOM和BOM学习笔记
一.Web APIs简介导读 (一)Web APIs和JS基础关联性 1.JS的组成 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTKrwpOg-166333998 ...

根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第三节 bootstrap的布局容器

咱们大部分围绕着两个问题来叙述
是什么？
怎么做？

一.目录（总体，这门课要学的目录）（现在是第二章，bootstrap前端开发框架）

1.响应式开发

2.bootstrap前端开发框架

3.bootstrap栅格系统

4.实训案例（阿里百秀首页）

二，bootstrap前端开发框架第三节 bootstrap的布局容器

1.1 布局容器是啥

根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第三节 bootstrap的布局容器相关推荐

最新文章

热门文章

根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章 第三节 bootstrap的布局容器

咱们大部分围绕着两个问题来叙述 是什么？ 怎么做？

一.目录（总体，这门课要学的目录）（现在是第二章，bootstrap前端开发框架）

1.响应式开发

2.bootstrap前端开发框架

3.bootstrap栅格系统

4.实训案例（阿里百秀首页）

二，bootstrap前端开发框架 第三节 bootstrap的布局容器

1.1 布局容器是啥

根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章 第三节 bootstrap的布局容器相关推荐

最新文章

热门文章

根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第三节 bootstrap的布局容器

咱们大部分围绕着两个问题来叙述
是什么？
怎么做？

二，bootstrap前端开发框架第三节 bootstrap的布局容器

根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第三节 bootstrap的布局容器相关推荐