Bootstrap 使用

Posted 2021-12-01 penghuake

Bootstrap

一、简介

1. 什么是Bootstrap

• 是一个基于html、CSS、javascript的前端框架。让前端开发更简单快速

• 好处：

  • 开发快速，代码优雅，美观大方

  什么样的代码是优雅的：

  1. 完成需求

  2. bug要少

  3. 格式化

  4. 逻辑简洁，清晰明了

  5. 代码注释

2. 响应式布局

• 响应式布局：同一套页面自动适应不同的终端设备，显示合适的样式。

• Bootstrap是响应式布局最成功的实现

• 移动设备优先的前端框架

二、栅格系统

1. 什么是栅格系统

• 栅格系统：是一种页面布局方式。综合了table的简单和div+css的高效，形成的一种新布局方式。

2. 栅格系统的使用

2.1 容器

• container：宽度是阶段性变化的固定值。如果占不满，两边有留白

• container-fluid：宽度始终是100%

2.2 行

• row：

  • 一个容器里可以有多行

  • 一行里分为12份：一行里最多12个单元格

2.3 单元格

• col-xx-n：单元格在xx设备类型里占n份

  • n：单元格占几份

  • xx：设备类型：lg, md, sm, xs

三、常用样式、组件、插件

1. 常用样式

• 内联列表：通常用于友情链接，横向排列的链接

• 表格：

  • 普通表格：在table标签上加类名：table

  • 条纹表格：在table标签上加类名：table-striped

  • 带边框表格：在table标签上加类名：table-bordered

  • 鼠标悬念变色：在table标签上加类名：table-hover

• 表单：

  • 文本框

  • 文本域

  • 下拉框

  • 单选和多选

• 按钮

2. 常用组件

• 字体图标：在任何标签上增加类名，类名是图标的名称

• 导航条：

  • 反色导航条：给最外层的nav标签设置类名：navbar navbar-inverse

  • 导航条里表单靠右：给form标签设置类：navbar-form navbar-right

• 分页

  • 标记当前页：在页码的li标签上增加类名：active

  • 禁用按钮：在按钮的li标签上增加类名：disabled

• 进度条

3. 常用插件

• 模态框

  • 窗口的内容分为三部分：

    • modal-header：头部

    • modal-body：内部

    • modal-fotter：底部

• 轮播图Carousel

  • Indicators：指示灯，图片上显示的小点。通常有几张图片，就显示几个小点

  • Wrapper for Slides：要切换的图片。

    • 每个div class="item"是一张图片的显示，

      • 把图片路径写到内部的img标签上

      • 添加文字描述

  • Controls：控制按钮

    • 上一张和下一张

 

内容总结

1. 理解响应式布局：

   1. 同一套页面自动适应不同的终端设备，显示合适的样式。

   2. bootstrap的响应式布局，靠栅格系统实现的

2. 栅格系统：布局，用法类似于表格，本质是div+css

   1. 容器：

      • container：宽度是阶段性变化的固定值，两边有留白

      • container-fluid：宽度始终是100%

   2. 行：一个容器里可以有多行

      • row：一行里最多有12个单元格

        • 如果不够12个，空着

        • 如果超过12个，换行显示

   3. 单元格：一行里可以有最多12个单元格

      • col-xx-n：单元格在xx设备类型里要占n份

        • xx：设备类型：lg, md, sm, xs

        • n：单元格占几份

3. 常用样式

   • 内联列表

   • 表格

   • 表单

   • 按钮

4. 常用组件

   • 字体图标

   • 导航条

   • 分页条

5. 常用插件

   • 模态框

   • 轮播图

   •