html5源码笔记（四）—前端培训机构

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

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

图片1.png

关注微信公众号“icketang”，获取最新前端资讯，学习资料

完整笔记、web前端视频教程，请添加微信“haomei0452”免费领取

B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战

上一篇文章： html5源码笔记（三）——前端培训机构

下一篇文章： JavaScript（第一天）—web前端培训

相关咨询

最新文章

推荐文章

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

二、bootstrap介绍

2.1 bootstrap概述

2.2 bootstrap引入：

2.3 容器及标题标签

2.4 媒体查询：

2.5 网格布局