boostrap框架介绍
核心知识点
- boostrap框架
- 栅格系统[重点,不是难点]
- 基本的全局样式
学习目标
- 能够使用boostrap框架中的基本样式
- 能够使用栅格系统完成阿里百秀案例
boostrap框架
-
介绍 https://www.bootcss.com/
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
-
起步
-
下载【下载后的框架就是一个css文件】
-
生产环境下的Bootstrap
编译并压缩后的 CSS文件。不包含文档和源码文件。 -
Bootstrap源码
没有压缩的CSS文件,包含文档和源码文件。
-
-
引用 【在网页中引用下载好的css文件】
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap</title><!-- 引用bootstrap css文件 --><link href="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1></body> </html> -
框架中的全局样式
-
在框架中用来表示一号标题到六号标题
.h1 - .h6
-
在框架中要设置文字对齐方式可以使用如下类名
text-left | text-center | text-right
-
在网页中表示超小文字的标签
文字
<small>超小文字</small>或者使用类名<div class="small">超小文字</div> -
字母大小写转化对应的类名
text-uppercase —> 将小写字母都转化为大写字母
text-lowercase —> 将大写字母转化为小写字母
text-capitalize ----> 将单词首字母转为大写
注意：以上类名中使用都是 text-transform属性实现的
.text-lowercase {text-transform: lowercase; } .text-uppercase {text-transform: uppercase; } .text-capitalize {text-transform: capitalize; } -
去掉列表前的默认样式
.list-unstyled -
实现li一行显示添加类名
.list-inline -
设置表格基本样式
.table.table-bordered 设置边框.table-hover 设置鼠标悬停时候的样式
-
-
栅格系统
-
介绍
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
-
作用：
- 通过栅格系统就可以开发响应式布局
- 将栅格系统对应的盒子分为12列实现的
-
使用
-
必须 放到类名叫
.container（固定宽度）或.container-fluid（100% 宽度）中 -
栅格参数
- col-xs-值 ： 代表在超小设备中（手机）
- col-sm-值: 代表在小屏幕设置中（平板）
- col-md-值：代表在中等设备中（PC设备）
- col-lg-值: 代表的是在超大设备中
- 备注栅格参数中的值取值范围是： 1- 12
-
-
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CPi2m4Q0-1582626878125)(img/1582448784655.png)]
- col-md-值：代表在中等设备中（PC设备）- col-lg-值: 代表的是在超大设备中- 备注栅格参数中的值取值范围是： 1- 12
[外链图片转存中…(img-CPi2m4Q0-1582626878125)]
和string.join(ls))
