Bootstrap 使用

Posted penghuake

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap 使用相关的知识,希望对你有一定的参考价值。

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. 常用插件

    • 模态框

    • 轮播图

    •  

 

以上是关于Bootstrap 使用的主要内容,如果未能解决你的问题,请参考以下文章

Jquery if复选框是否已选中Bootstrap开关

使用bootstrap的原因是啥

css Bootstrap 3进度条片段

HTML bootstrap片段消息

VS Code中自定义Emmet代码片段

MUI