脚本宝典收集整理的这篇文章主要介绍了BootStra入门，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1 什么是Bootstrap？Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。2 为什么使用 Bootstrap？移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。浏览器支持：所有的主流浏览器都支持 Bootstrap。容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。它是开源的。3 下载与使用中文官网：https://www.bootcss.com/

下载好的，压缩包解压出来。就得到了bootstrap的资源文件了。

分别是css、js、font字体，全部放在项目的根目录即可

4.Bootstrap的使用1 表格和之前的表格相比，标签更丰富更加语义化，效果更佳美观

1.1 丰富的标签<table> 为表格添加基础样式<thead> 表格标题行的容器元素（<tr>）<tbody> 表格主体中的表格行的容器元素（<tr>）<tr> 表格行<td> 默认的表格单元格。<th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用。<caption> 关于表格存储内容的描述或总结。1.2 好看的类样式.table 为任意 <table> 添加基本样式 (只有横向分隔线).table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色.table-bordered 为所有表格的单元格添加边框.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示.table-condensed 让表格更加紧凑1.3 情景色类样式适合应用在<th>、<tr>，<td>

.active 激活效果（悬停颜色）.success 表示成功或积极的动作.info 表示普通的提示信息或动作.warning 表示警告或需要用户注意.danger 表示危险或潜在的带来的负面影响的动作1.4 响应式表格表格的父元素设置响应式，小于768px，出现边框2 表单

2.1表单布局

2.2默认布局

2.3内联布局

让所有表单元素居于一行

注意：当小于768px时,会自动还原成移动端样式

2.4栅格系统

• bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子

• 当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果

脚本宝典总结

以上是脚本宝典为你收集整理的BootStra入门全部内容，希望文章能够帮你解决BootStra入门所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。