文章目录
本文讲解了Bootstrap 响应式UI框架 的基本使用与规则，如果本文对你所帮助，请三连支持博主，先赞后看养成习惯。
以下是本篇文章正文内容，下面案例可供参考
顾名思义 就是一套架构，它有一套完整的网页功能解决方案，而且控制权在框架本身，有预定的样式库、组件库和插件。使用者必须按照框架所规定的规则来开发。
Bootstrap 是基于HTML CSS Javascript 的框架，用于开发响应式布局，移动设备有限的web项目，它简单灵活，使得web 开发更加快捷。
因为它本身已经提供了一套页面样式和功能，所以适合没有设计师的团队。
它框架里包含了自定义的jQuery插件，所以功能上是依赖jquery 插件的，且它整个框架的底层原理是利用Less和Sass。其中bootstrap3是基于Less，bootstrap4是基于Sass。
bootstrap一般用于后台管理界面。如果想在互联网层面用作用户交互，样式还是有点保守的。所以前台一般需要ui设计师来设计，前端工程师来实现。但后台管理界面对样式的需求就没有这么高了，使用bootstrap可以很快的完成页面布局，关键是不难看！所以bootstrap简直就是后台程序员都福音，至于3和4没必要纠结，毕竟这个场景是够用就行
中文官网：
https://www.bootcss.com/
想要去快速开发页面，最好的解决办法是使用UI框架即提供了一套UI设计好的样式且带有很多功能的各种插件。
自己装修 就是使用媒体查询media 即原生响应式。
请装修公司 Bootstrap框架
生产环境：指上线的项目，上线项目为了提高网站访问速度，尽量使用压缩文件。
源码：当时去封装框架的时候使用的底层代码，可以帮助开发者更好的理解，一般本地开发下载该源码
Sass：针对于Sass 项目
创建HTML骨架结构(一般在编辑器里创建html模板)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染，版本不同兼容性不同 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备的宽度一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ -->
<title>Bootstrap模板</title>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 以下是条件注释，会自己判断 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Hbulider 创建html模板
1 新建html文件，选择自定义模板
2 跳转到编辑器设置模板的位置
3 在该html 文件夹里新建一个html文件，命名为bootstrap.html，打开该文件把上述HTML骨架结构复制进去，注意css 文件和 js 文件的路径，保存。
4 验证模板是否创建好
回到HbuliderX编辑器，新建html文件，发现选择模板里多出刚刚创建的bootstrap模板，选择该模板即可。
bootstrap 需要为页面内容和栅格系统包裹一个容器，它已经预先定义好了这个类，叫.container
”grid systems “ 又叫 网格系统 ，意为将页面布局划分成等宽的列，通过列数的定义来模块化页面布局。
随着屏幕或视口尺寸的增加，系统自动分为最多12列
container 宽度是固定的，但是不同的屏幕下，container宽度不同，但我们仍然container等分成12等份
栅格参数:
栅格系统用法
(1) 行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）
(2) 通过“行（row）”在水平方向创建一组“列（column）”，且内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素
(3) 列是通过指定1到12的值来表示其跨越的范围，即列数之和不能超过总份数12份。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
(4) 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列，如果一“行（row）”中包含了的“列（column）”小于等于 12，则依次从左向右排列。
(5) 可同时指定多个设备的类名，如：class=”col-lg-2 col-md-6”
(6) 移动设备优先，xs 默认 占12份，没有指定设备类前缀，继承方式为 xs>sm>md>lg
针对不同屏幕尺寸隐藏或显示页面内容
visible-* ： 只对* 可见
hidden-* ： 只对* 隐藏
visible-xs/sm/md/lg
hidden-xs/sm/md/lg
visible-xs/sm/md/lg-block/inline/inline-block
特点：
Bootstrap 5（当前的主要版本，于 2021 年 5 月发布）带来了大量的变化和改进，包括添加新组件、新类、旧组件的新样式、更新的浏览器支持、删除一些旧组件，以及更多。
jQuery不再是一个依赖项
浏览器支持更改
在 v4 之前，Bootstrap 曾经支持 Internet Explorer (IE) 10 和 11。从 Bootstrap 5 开始，对 IE 的支持已完全取消。因此，如果您的网站需要支持 IE，则在迁移到 v5 时可能应该小心。
浏览器支持的其他变化包括：
数据属性的更改
组件的数据属性现在以 data-bs 开头，以方便命名Bootstrap属性
Bootstrap 5 为库带来了一些新组件
（1）Accordion 手风琴
（2）Offcanvas 重叠侧边栏
（3）Floating Label 浮动标签
我正在使用i18n从头开始构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在rubyonrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie
我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI
这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub
我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道rubyonrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD