
书: https://pan.baidu.com/s/1jDVnfhmGRwu5jeEuV63Kcg?pwd=bmyj
笔记如下:
- Bootstrap简介:介绍Bootstrap框架的作用、优势及适用场景。
- 环境搭建:讲解如何下载Bootstrap并集成到HTML项目中(CDN或本地文件)。
- 网格系统:Bootstrap的响应式栅格布局(
.container
、.row
、.col-*-*
)。 - 排版与文本样式:使用Bootstrap预定义的标题、段落和文本对齐类(如
.text-center
)。 - 按钮与按钮组:按钮样式(
.btn
、.btn-primary
)及按钮组(.btn-group
)。 - 表单控件:表单布局(
.form-group
)、输入框样式(.form-control
)和验证状态。 - 导航组件:导航栏(
.navbar
)、标签页(.nav-tabs
)和面包屑导航(.breadcrumb
)。 - 卡片与面板:卡片组件(
.card
)的标题、内容和页脚设计。 - 列表组与徽章:列表组(
.list-group
)和徽章(.badge
)的使用方法。 - 警告框与提示:警告框(
.alert
)的样式和关闭功能(.alert-dismissible
)。 - 模态框:弹出对话框(
.modal
)的触发与内容配置。 - 轮播图:使用
.carousel
实现图片轮播效果及控制按钮。 - 折叠与手风琴:折叠组件(
.collapse
)和手风琴效果(.accordion
)。 - 工具提示与弹出框:通过
data-toggle
属性添加提示(.tooltip
)和弹出框(.popover
)。 - 响应式工具类:控制元素在不同屏幕尺寸下的显示/隐藏(如
.d-none
、.d-md-block
)。 - Flexbox布局:Bootstrap的Flex工具类(
.d-flex
、.justify-content-*
)。 - 颜色与背景:使用Bootstrap预定义的颜色类(如
.bg-primary
、.text-success
)。 - 自定义主题:通过Sass变量修改默认样式(如主色、字体)。
- 实用工具类:间距(
.m-*
、.p-*
)、边框(.border
)和阴影(.shadow
)。 - 项目实战:综合运用组件构建一个响应式网页(如企业官网或博客)。