Bootstrap基础知识
1 、什么是 Bootstrap? Bootstrap 的作用是什么?
Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架.
该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效)
开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现.
作用:
- Bootstrap 使得 Web 开发更加快捷、 高效.
- Bootstrap 支持响应式开发, 解决了移动互联网前端开发的问题.
2、视口的常见设置 (了解)
视口的常见设置 | |
---|---|
width=device-width |
视口的宽度, 大多手机浏览器视口的宽度是980. device-width表示采用设备的宽度 例如: 手机是5.5寸, 那么视口也采用5.5寸宽度 |
initial-scale=1 |
移动设备上, 打开页面时的初始化缩放级别 取值: 1-5 1表示100%, 5表示500% |
minimum-scale=1 | 移动设备上, 页面可以最小缩放的级别 |
maximum-scale=1 | 移动设备上, 页面可以最大缩放的级别 |
user-scalable=no |
移动设备上, 页面禁止缩放 如果设置“user-scalable=no”, 则“minimum-scale”和“maximum-scale”无效 |
3、Bootstrap 环境搭建
4、布局容器
Bootstrap 必须需要至少一个布局容器, 才能为页面内容进行封装和方便的样式控制. 相当于一个面板.
帮助手册位置:
全局 CSS 样式 —> 概览 —> 布局容器
.container |
类用于固定宽度并支持响应式布局的容器. 特点: 居中, 两段留白.
…
|
---|---|
.container-fluid |
类用于 100% 宽度, 占据全部视口 (viewport) 的容器.
…
|
5、什么是响应式布局? 响应式布局解决的问题?
响应式布局: 一个网站的展示能够兼容多个终端 (手机、iPad、PC 等), 而不需要为每一个终端单独做一个展示页面.
此概念专为解决移动互联网浏览诞生的.
响应式布局, 使得网站仅适用一套样式, 就可以在不同分辨率下展示出不同的舒适效果, 大大降低了网站开发维护成本, 并且能带给用户更好的体验性.
6、简述栅格系统
为了方便在布局容器中进行网页的布局操作.
Bootstrap 提供了一套专门用于响应式开发布局的栅格系统.
栅格系统将一行分为 12 列, 通过设定元素占用的列数来确定布局元素在页面上的展示位置.
帮助手册位置:
全局 CSS 样式 —> 栅格系统
作用:
可以让开发人员更加轻松进行网页布局, 并且轻松进行响应式开发.
注意事项:
- 一个 row 下, 如果设置的 col 列数总和小于等于 12, 那么该 row 下元素在一行排列.
- 一个 row 下, 如果设置的 col 列数综合大于 12, 那么超出的元素会另起一行排列.
- 行和列可以进行无限嵌套, 嵌套方式必须为 列—行---列—行······
7、栅格系统的特点及入门案例
栅格系统的特点:
- 行 (row) 必须包含在 .container (固定宽度) 或 .container-fluid (100% 宽度)中.
- 行使用的样式 .row, 列使用的样式 .col-尺寸-数字 元素内容应当放置于列(column)内.
- 基本的书写方式必须是: 容器—行---列
栅格系统的参数:
col-屏幕尺寸-占用列数
为了方便显示元素大小, 我们为展示元素都赋予了相同样式:
height: 100px;
border: 1px solid red;
8、屏幕尺寸简述
尺寸 | 对应 |
---|---|
large: lg | 大屏幕, 一般PC尺寸 |
medium: md | 中等屏幕, 小PC尺寸 |
small: sm | 小屏幕, iPad尺寸 |
x-small: XS | 超小屏幕, 智能手机尺寸 |
设置屏幕尺寸时的注意事项:
若设置了某个屏幕尺寸的样式, 那么该尺寸对应的屏幕或比其尺寸大的屏幕显示会遵循该设置, 但比该尺寸小的屏幕, 会默认一个元素占 12 列的设置.
例如:
设置了 col-md-4, 那么相当于也设置了 col-lg-4.
其他屏幕尺寸均默认为 col-sm-12, col-xs-12.
9、不同设备的尺寸大小
10、列偏移
通常情况下我们需要将元素居中显示, 需要左边空出一定的空白区域, 这里我们就可以使用列偏移来达到效果.
.co l-屏幕尺寸-offset-数字 | 在指定屏幕尺寸下, 向右偏移 * 个列 |
---|---|
11、列表
Bootstrap 同样提供了实用的列表样式供开发人员使用.
帮助手册位置:
全局 CSS 样式 —> 排版 —> 列表
.list-inline | 将列表所有元素放置一行. |
---|---|
12、按钮
Bootstrap 提供了丰富的按钮样式供开发人员使用.
帮助手册位置:
全局 CSS 样式 —> 按钮
13、导航条
Bootstrap 已经提供了完整的导航条实例, 通常情况下, 我们仅需进行简单的修改即可使用.
帮助手册位置:
组件 —> 导航条
14、轮播图
Bootstrap 已经提供了完整的轮播图实例, 通常情况下, 我们仅需进行简单修改即可.
帮助手册位置:
Javascript插件 —> Carousel
轮播图 div 的定时换图属性: data-interval=“毫秒值”
注意: 多个轮播图必须修改轮播图的 ID
15、排版-对齐方式
Bootstrap 提供统一的排版方式设置, 方便开发人员对内容板式进行调整.
帮助手册位置:
全局 CSS 样式 —> 排版 —> 对齐
.text-left | 使元素内容靠左显示 |
---|---|
.text-center | 使元素内容居中显示 |
.text-right | 使元素内容靠右显示 |
16、表单元素
Bootstrap 同样提供了丰富的表单控件供开发人员来选择.
帮助手册位置:
全局 CSS 样式 —> 表单
17、补充
Bootstrap 分为完整版和压缩版.
完整版用于源码学习, 但因为文件大小问题, 不适合网络间传递.
压缩版用于网络分布, 压缩版和完整版的唯一区别, 仅为压缩版将代码间的大量空格和回车换行删除掉了, 节约了大量的空间, 功能上完全相同, 适用于网络间快速传递. 但因为没有了空格和换行, 源代码可读性极低.
Bootstrap基础知识相关推荐
- Java学习前,需要掌握的一些基础知识
JDKJREJVM区别与联系 安装JDK时为什么有两个JRE 细说JDK目录结构 在学习Java之前,对于一些基础知识的总结: 在学习java之前,第一件事便是搭建Java开发环境.JDK(Java ...
- Java基础知识(八) Java平台与内存管理
Java基础知识 1. 为什么说Java是平台独立性语言 2. Java 平台与此他语言平台有哪些区别 3. JVM 加载 class 文件的原理机制是什么 4. 什么是GC 5. Java 是否存在 ...
- hawk大数据基础知识总结(1)
一.大数据概述 1.1大数据的概念 大数据一共具有三个特征:(1)全样而非抽样:(2)效率而非精确:(3)相关而非因果. (1)在过去由于缺乏获取全体样本的手段,人们发明了"随机调研数据&q ...
- 我就不信了,spring基础知识这么总结整理还拿不下大厂offer(一)
本人作为一个学渣,大学四年醉生梦死,得过且过,学习知识虽不至于什么都不懂,但基本上是浮于表面.虽然度过一个愉快的大学生活,但最终却不得不为自己当初的任性买单,投递简历四处碰壁,看着身边的同学一个个每天 ...
- python基础知识有哪些需要背(记住是基础知识)我是初学者
大家好,小编来为大家解答以下问题,一个有趣的事情,一个有趣的事情,今天让我们一起来看看吧! 1.python基础知识有哪些需要背(记住是基础知识)我是初学者 或看好Python的广阔前景,或看中Pyt ...
- Netty5基础知识介绍及简单使用
Netty基础知识 Netty 是一个 NIO client-server(客户端服务器)框架, 使用 Netty 可以快速开发网络应用,例如服务器和客户端协议.Netty 提供了一种新的方式来使开发 ...
- Java SE 基础知识
Java SE 基础知识 1 2 @(Notes)[J2SE, Notes] VICTORY LOVES PREPARATION. 特别说明: 该文档在马克飞象查阅最佳: 本部分知识还在迭代中,欢迎补 ...
- Android基础知识梳理
文章目录 系统架构 应用层 应用框架层 系统运行库层 硬件抽象层(HAL) Linux内核层 补充 通信方式 Binder IPC原理 Binder原理 Socket handler 主线程中 子线程 ...
- C#进行MapX二次开发之MapX基础知识
C#进行MapX二次开发之MapX基础知识 MapX的主要技术特点 (1). 以表(Table)的形式组织信息 每一个表都是一组MapInfo文件,这些文件组成了地图文件和数据库文件.为使用MapIn ...
最新文章
- Android 替换TextView 里面指定的符号
- XML DOM 解析器概述
- java枚举变量带括号_Java~如何使用Enum(枚举)和Lambda表达式
- python 搜索引擎Whoosh中文文档和代码 以及jieba的使用
- 【自动驾驶】摄像头单目测距原理及实现
- android 揭示动画_遗传编程揭示具有相互作用的多元线性回归
- 复习深入笔记01:对象/可变与不可变类型/字符编码/闭包
- 这就是八成女性不爱用刷脸支付的原因!支付宝:一周内给安排上
- SpringMvc-@ModelAttribute注解
- JavaEE笔记(十)
- 一、1.kaggel简街市场预测—baseline代码解析
- Execution failed for task :Test:lintVitalRelease/Lint found fatal errors while assembling a release
- lightbox点击图片预览
- js在ie下打开对话窗口的方式
- JAVA根据PDF文件生成图片
- [读论文]弱监督学习的精确 3D 人脸重建:从单个图像到图像集-Accurate 3D Face Reconstruction with Weakly-Supervised Learning:From
- Proteus8.9 VSM Studio SDCC编译器仿真STC15W4K32S4系列013_iic_03_AT24C08
- c语言中“函数的定义不可以嵌套,但函数的调用可以嵌套
- 使用缓冲字符流进行文档排序
- 一篇非常好的c++学习方法,转自贴吧