侧边栏壁纸
博主头像
惊羽博主等级

hi ,我是惊羽,前生物学逃兵,现系统工程沉迷者 . 贝壳签约工程师 , 曾被雇佣为 联拓数科 · 支付研发工程师 、京东 · 京东数科 · 研发工程师、中国移动 · 雄安产业研究院 · 业务中台技术负责人 .

  • 累计撰写 101 篇文章
  • 累计创建 14 个标签
  • 累计收到 14 条评论

前端框架(1) - Bootstrap 简介

惊羽
2021-03-16 / 0 评论 / 0 点赞 / 166 阅读 / 768 字
温馨提示:
本文为原创作品,感谢您喜欢~

1. 介绍

1.1 响应式

根据不同的设别的屏幕大小,而显示不同样式的页面,但使用代码是同一份的

1.2 响应式实现

主要是css3的媒体查询功能(css是静态语言 没有逻辑判断)

css3媒体查询的伪代码

if(屏幕大小>1024px){
	// 使用样式1
}else if(屏幕大小>728px){
	// 使用样式2
}

1.3 响应式框架

bootstrap是响应式框架的一种

2. bootstrap startup

1 下载bootstrap的框架压缩包
2 解压压缩包
3 环境搭建
4 页面布局(对页面进行区域划分)
5 填充每个区域的内容(copy过程)

3. bootstrap的布局

3.1 原始方式

table -- 缺点:加载慢
div+css -- 缺点:学习成本高 不易操作

3.2 bootstrap方式

吸取了table和div+css各自的优点 进行页面布局-----栅格系统布局

3.2.1 栅格布局
1 每一行会划分为12块
2 栅格系统可以通过属性 去进行响应式
class:col-md-*  == column-middle-num 在中型屏幕 div占据num块 div是否显示和隐藏

4. bootstrap的compnent

1 全局css样式:静态样式信息
2 组件:具有一定样式和功能的html组件
3 js插件:使用js实现的一些插件的集合
0
广告 广告

评论区