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标准样式

这是bootstrap

这是bootstrap

这是bootstrap

这是bootstrap

这是bootstrap

这是bootstrap

1

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) { … }

1

或：

// 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) { … }

1

1

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





  one of three columns





  one of three columns

  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns

  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns

  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns





  one of three columns

col-2





col-8





col-2

col-3





col-6





col-3

1

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

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

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

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

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

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

1

2.7 表格

1 默认样式

2 .table

3 可选样式

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

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

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

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

8

  #

  First

  Last

  Handle

  1

  Mark

  Otto

  @mdo





  2

  Jacob

  Thornton

  @fat





  3

  Larry

  the Bird

  @twitter

1

2.7 表单
1

1

2.8 按钮

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Link

按钮

按钮

按钮

按钮

按钮

按钮

按钮

按钮

1

2.9 卡片 面包屑

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

1

2.9 轮播图

Previous

Next