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

2019-08-22 本文已影响0人爱创课堂

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

@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 在线方式，需要联网

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

1

2.3 容器及标题标签

类名.container根据不同视口给出不同的方案，但是都是页面居中的效果

类名 .container-fluid 宽度百分百

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

<h1>这是bootstrap</h1>

<h2>这是bootstrap</h2>

<h3>这是bootstrap</h3>

<h4>这是bootstrap</h4>

<h5>这是bootstrap</h5>

<h6>这是bootstrap</h6>

1 </div>

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-

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

one of three columns

</div>

col-2

</div>

col-8

</div>

col-2

</div>

col-3

</div>

col-6

</div>

col-3

</div>

1 </div>

2.6 文本与排版

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

<p class="text-left text-success bg-info">这是关于排版和文本效果的应用</p>

<p class="text-center text-info bg-warning">这是关于排版和文本效果的应用</p>

<p class="text-right text-warning bg-success">这是关于排版和文本效果的应用</p>

<p class="text-danger bg-primary">这是关于排版和文本效果的应用</p>

<p class="text-muted bg-danger">这是关于排版和文本效果的应用</p>

1 </div>

2.7 表格

1 默认样式

2 .table

3 可选样式

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

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

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

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

<thead>

<th scope="col">First</th>

<th scope="col">Handle</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td>Jacob</td>

<td>Thornton</td>

</tr>

<tr>

<td>Larry</td>

<td>@twitter</td>

</tr>

</tbody>

</table>

1 </div>

2.7 表单

2.8 按钮

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-light">Light</button>

</div>

</div>

1 </div>

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>

</div>

<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>

</div>

<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>

</div>

1 </div>

2.9 轮播图

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ol>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

</body>

</html>

关注VX公众号“icketang” 免费领取华为荣耀商城项目实战视频教程

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

猜你喜欢

热点阅读