HTML5：学习（6）Bootstrap框架

来源：互联网发布：5230软件下载编辑：程序博客网时间：2024/05/20 23:57

一：Bootstrap介绍

1：简介：Bootstrap，来自twitter，是一种简洁灵活的前端框架，由动态CSS语言Less写成，提供了优雅的HTML和CSS规范。它基于H5和C3开发，形成一套独特的风格。

最新版本：3.3.7

2：组成：基本结构；CSS；丰富的组件；JS插件（自带13个JQ插件）；定制

3：特点：自定义组件；响应式布局等。

具体使用可参考使用手册

二：CSS样式

1：页面设置为H5类型： <!DOCTYPE html>

2：移动设备优先添加viewport元数据标签 <meta name="viewport" content="width=device-width,initial-scale=1">

3：排版和链接

4：布局容器

5：栅格系统：响应式的流式栅格系统，随着频幕尺寸的增加，系统自动分为最多12列，包含易于使用的预定义类，更强大的mixin生成更具语义的布局。

6：媒体查询：来针对不同的设备创建分界点阈值，设计不同的布局尺寸

7：流式布局容器：将栅格布局转换为100%宽度的布局

8：内联文本元素：标记文本mark，删除文本del，下划线u，斜体，对齐，大小写

9：缩略语：abbr 当鼠标悬停在词上显示完整内容

10：列表：有序，无序，无样式

11：代码：内联<code>，用户输入标记kbb，变量var，输出samp

12：表格：带边框的，鼠标悬停作响应，状态类，响应式

13：表单：内联，水平排列，支持的控件

14：校验状态：基于色彩的提示

15：按钮样式：预定义样式，尺寸，禁用状态

16：图片：响应式图片，让图片呈现不同形状

17：辅助类：文本样色，背景颜色，关闭按钮，显示和隐藏元素

18：使用Less，重新编译，获得新的变量和别名

19：工具Mixin，于不相关的CSS结合以达到特定目的

三：组件

1：字体图标：支持250多个字体图标

2：下拉菜单：用于显示链接列表的可切换，有上下文的菜单，对齐，分组，禁用选项

3：按钮组：排列方式，下拉菜单

4：输入框组：尺寸，额外元素

5：导航：标签页，位置，可访问性

6：分页：分页组件，可点击，当前页

7：标签，徽章（额外信息）

8：自定义内容：任何HTML内容加入缩略图组件内

9：警告框：提供预定义消息，为用户动作提供反馈消息，可关闭，添加链接

10：进度条：为当前工作提供实时反馈，提示，情景变化，条纹效果，动画效果

11：媒体对象：抽象的样式，构建不同类型的组件

12：列表组：显示一组元素，可定义内容

13：面板：将某些DOM内容放到一个盒子里

四：javascript插件

1：jq插件的引入：单个或全部引用；data-api命名空间下的事件

2：过度效果 transition.js：对CSS过度效果的模拟

3：模态框 modal.js：经过优化，更灵活，对话框的形式，具有最小和实用的功能集，展示信息

4：滚动监听 scrollspy.js：根据滚动条的位置来更新导航项

5：弹出框 popover.js：为任意元素添加浮层，存放非主要信息

7：警告信息 alert.js：弹出警告信息

8：按钮 button.js：丰富的按钮功能

9：折叠 collapse.js：折叠效果

10：轮播 carousel.js：轮播插件，首页展示多张图片

五：定制

自定义组件，less变量和jq插件，定制一份自己的bootstrap版本吧

阅读全文

0 0