提醒：本文最后更新于 2026-05-24 06:24，文中所关联的信息可能已发生改变，请知悉！
bootstrap 框架使用教程是介绍一些 bootstrap 框架的学习技巧和方法，教导使用者，帮助使用者对 bootstrap 更加熟悉和操作。
编辑
一、简介
Bootstrap 来自 Twitter，是 Twitter 推出的一个用于前端开发的开源工具包，Bootstrap 是基于 HTML5 和 CSS3 开发的，它在 jQuery 的基础上进行了更为个性化和人性化的完善。
二、熟悉结构与组成
1. Bootstrap CSS： 概览，网格系统，排版，代码，表格，表单，按钮，图片，辅助类，响应式实用工具。
2. Bootstrap 布局组件： 字体图标，下拉菜单，按钮组，按钮下拉菜单，输入框组，导航元素，导航栏，面包屑导航，分页，标签，徽章，超大屏幕，页面标题等。
3. Bootstrap 插件： 插件概览，过渡效果，模态框，下拉菜单，滚动监听，标签页，提示工具，弹出框，警告框，按钮，折叠，轮播，附加导航等。
三、如何在 html 使用
1. 利用搜索引擎，到 bootstrap 官方网站下载 bootstrap，打开解压包之后可以发现包含三个文件夹 css、fonts、js。
2. 到官网下载 jQuery，因为 Bootstrap 需要 jQuery 支持。
3. 将下载后的就 jQuery 放到 bootstrap 中的 js 目录。
4. 在 bootstrap 的根目录下新建一个 demo.html 文件，编辑 demo.html 文件，添加对 bootstrap 框架中 css 和 js 的引用，写好源码，在写源码时，要注意格式，编辑的规范。
5. bootstrap 框架的基本使用架构，即可在 html 中加载使用。
四、编码规范
1. Bootstrap CSS 编码规范
用两个空格来代替制表符（tab）；为了获得更准确的错误报告，每条声明都应该独占一行；为了代码的易读性，在每个声明块的左花括号前添加一个空格；尽量使用简写形式的十六进制值例如，用 #fff 代替 #ffffff；避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;；注意声明顺序，第一是 Positioning，最后是 Visua；不要使用 @import，会增加请求次数；将媒体查询放在尽可能相关规则的附近；class 命名要清晰明了。
2. Bootstrap HTML 编码规范
嵌套元素应当缩进一次；对于属性的定义，确保全部使用双引号，绝不要使用单引号；不要省略可选的结束标签，例如，</li> 或 </body>；尽量避免多余的父元素；使用明确声明字符编码，能够确保浏览器快速；在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性。
五、建议
可注册 twitter 账号，登陆后，可关注相关网站，了解更多相关的知识，方便操作使用。
