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

最新推荐文章于 2019-10-18 17:44:15 发布

Icketang_

最新推荐文章于 2019-10-18 17:44:15 发布

阅读量189

点赞数

分类专栏：爱创课堂专业前端培训文章标签： html html5 css web 前端

本文链接：https://blog.csdn.net/Icketang_/article/details/100020946

版权

爱创课堂专业前端培训专栏收录该内容

73 篇文章 2 订阅

订阅专栏

一、响应式的实现-媒介查询
@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="images/1.jpg" alt="First slide">

</div>

<div class="carousel-item">

  <img class="d-block w-100" src="images/2.jpg" alt="Second slide">

</div>

<div class="carousel-item">

  <img class="d-block w-100" src="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>

Icketang_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5源码笔记（四）【爱创课堂专业前端培训】

一、响应式的实现-媒介查询@media实现方式一：把media限定到link中实现方式二：把media写到css代码中留活口，ie兼容@charset “utf-8”;*{margin: 0;padding: 0;}aside{height: 200px;width: 20%;float: left;background: orange;}div{...
复制链接

扫一扫