一、响应式的实现-媒介查询
@media

实现方式一：把media限定到link中

实现方式二：把media写到css代码中

留活口，ie兼容

@charset “utf-8”;

margin: 0;

padding: 0;

}

aside{

height: 200px;

width: 20%;

float: left;

background: orange;

}

div{

height: 200px;

width: 40%;

float: left;

}

div.box1{

background: blue;

}

div.box2{

background: pink;

}

@media only screen and (min-width: 1000px) and (max-width: 1500px) {

aside{

display: none;

}

div.box1{

width: 50%;

background: red;

}

div.box2{

width: 50%;

background: purple;

}

@media only screen and (max-width: 1000px) {

aside{

display: none;

}

div.box1{

width: 100%;

background: yellow;

}

div.box2{

width: 100%;

background: greenyellow;

}

1 }

二、bootstrap介绍
2.1 bootstrap概述
bootstrap 是世界上最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。

bootstrap分为“全局css样式”、“组件”、“javascript插件”这么几个主要的部分。

设置全局 css 样式

基本的 html 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

javascript插件

jquery 插件为 bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。

2.2 bootstrap引入：
npm 需要安装环境node.js

cdn 在线方式，需要联网

离线的方式下载引入自己的网站中

2.3 容器及标题标签
类名.container 根据不同视口给出不同的方案，但是都是页面居中的效果

类名 .container-fluid 宽度百分百

标题标签单位rem 改变了w3c标准样式

这是bootstrap

2.4 媒体查询：
// small devices (landscape phones, 576px and up)@media (min-width: 576px) { … }

// medium devices (tablets, 768px and up)@media (min-width: 768px) { … }

// large devices (desktops, 992px and up)@media (min-width: 992px) { … }

// extra large devices (large desktops, 1200px and up)@media (min-width: 1200px) { … }

或：

// extra small devices (portrait phones, less than 576px)@media (max-width: 575.98px) { … }

// small devices (landscape phones, 576px and up)@media (min-width: 576px) and (max-width: 767.98px) { … }

// medium devices (tablets, 768px and up)@media (min-width: 768px) and (max-width: 991.98px) { … }

// large devices (desktops, 992px and up)@media (min-width: 992px) and (max-width: 1199.98px) { … }

// extra large devices (large desktops, 1200px and up)@media (min-width: 1200px) { … }

2.5 网格布局
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

类名row 行必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

类名 col- 列、栏通过“行（row）”在水平方向创建一组“列（column）” ，内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素

一行一共有12栏，如果一行多余12栏，会自动换行

响应式：

.col-

.col-sm-

.col-md-

.col-lg-

.col-xl-

偏移值：

offset-

<div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div>

<div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div>

<div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div>

<div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div><div class="col-sm">one of three columns</div>

<div class="col-2">col-2</div><div class="col-8">col-8</div><div class="col-2">col-2</div>

<div class="col-3">col-3</div><div class="col-6">col-6</div><div class="col-3">col-3</div>

2.6 文本与排版
使用 Bootstrap 的排版特性，可以创建标题、段落、列表及其他内联元素，实际上它是把大部分在HTML的基本标签加了样式。

这是关于排版和文本效果的应用

2.7 表格

1 默认样式

2 .table

3 可选样式

4 .table-striped 为表格提供了斑马线的样式

5 .table-bordered 为表格增加边框(border)

6 .table-hover 为表格中的每一行赋予鼠标悬停样式。鼠标划过后会添加一个背景色。

7 .table-condensed 每个单元格的内补(padding)减半，可使表格更紧凑。

<tr class="bg-danger"><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>

<tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr>

2.7 表单
1

2.8 按钮

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Link

按钮

2.9 卡片面包屑

<h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a>

<h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a>

<h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a>

2.9 轮播图

<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators" data-slide-to="1"></li><li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

<div class="carousel-item active"><img class="d-block w-100" src="data:images/1.jpg" alt="First slide"></div><div class="carousel-item"><img class="d-block w-100" src="data:images/2.jpg" alt="Second slide"></div><div class="carousel-item"><img class="d-block w-100" src="data:images/3.jpg" alt="Third slide"></div>

<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span>

<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span>

html5源码笔记（四）【爱创课堂专业前端培训】相关推荐

html5源码笔记【爱创课堂专业前端培训】
一. 背景相关属性 Background-color Background-image Background-repeat Background-position Backgroound-attach ...
web前端源码笔记_canvas【爱创课堂专业前端培训】
爱创课堂前端源码笔记--canvas 一.canvas canvas是HTML5新增的标签用于提供"画布" 可以通过canvas元素获取对应的"上下文"(可以理 ...
零基础能不能学习web前端开发？【爱创课堂专业前端培训】
web前端日趋火热,不只招聘市场需求量大,还有一个重要的原因便是,入行门槛低,入门简单.单是关于许多小白同学来说还是有点担心,不知道零基础能不能学习web前端开发? 以为没那么简单.其实web前端是一 ...
Web前端全栈开发_node源码笔记【爱创课堂】
一.NodeJS简单复习 NodeJS是模块化开发的,有许多内置模块.HTTP模块用于搭建服务器.FS模块用于操作文件和文件夹.URL模块用于URL字符串和URL对象的转换.QueryStrings模 ...
小白前端学习流程【爱创课堂专业前端培训】
对于零基础非科班的同学来说,一个良好的前端学习流程和学习误区是需要我们去规避和计划的,爱创课堂目前专注于前端培训,总结了以下几点,给大家一个参考. 在开始学习之前你需要做到以下5点: 第一:需要达到什 ...
html5源码笔记（三）【爱创课堂专业前端培训】
一.常见的布局 1.1 固定布局(基本的布局方式) 1.2 百分比布局(流式布局) width.heigth.padding.margin使用百分比进行布局 width.padding.margin相 ...
css源码笔记（四）【爱创课堂专业前端培训】
复习: 1.1 布局模型--前端培训机构与盒子模型一样是最基础.最核心的东西,但是布局模型是从盒子模型基础上进行布局的. 流动模型flow.浮动模型float.层模型:绝对定位.固定定位流动模型f ...
JavaScript源码笔记（第七天）—爱创课堂专业前端培训
一.DOM介绍 DOM:Document Object Model 文档对象模型,用来表示和操作html或xml文档内容的基础API: 当网页被加载时,浏览器会创建对应的文档对象模型,而DOM模型被构 ...
JavaScript（第四天）—爱创课堂专业前端培训
一. 函数的声明和调用 1.1 函数的介绍函数是具有重复的代码块,由事件驱动或者调用才会执行.封装函数的目的是为了减少重复代码的书写,提高程序的可复用性. 1.2 函数的声明使用关键字functi ...

html5源码笔记（四）【爱创课堂专业前端培训】

这是bootstrap