bootstrap4，bootstrap最新版本
这篇文章给大家聊聊关于bootstrap4，以及bootstrap最新版本对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
bootstrap4.0与3.0有什么区别
Bootstrap4与Bootstrap3的核心区别如下：
1.布局方式差异
Bootstrap3采用传统的float浮动布局，依赖盒模型实现元素排列，需手动清除浮动以避免布局错乱。Bootstrap4则全面转向flex弹性布局，通过display: flex属性实现更灵活的响应式设计，支持水平垂直居中、等分布局等复杂场景，且无需处理浮动带来的兼容性问题。
2.栅格系统升级
Bootstrap3的栅格系统需显式指定列数（如col-md-6），若未指定则默认堆叠排列。Bootstrap4的栅格系统支持自动均分，例如row内包含2个col时，无论屏幕尺寸如何均会平分宽度。此外，Bootstrap3仅有4种栅格类（col-xs/sm/md/lg），而Bootstrap4扩展为5种，新增col-xl（超大屏幕）并移除col-xs（默认特小屏幕无需前缀）。
3.单位与偏移设置
Bootstrap4改用rem单位替代像素（px），实现更精准的字体与间距缩放。列偏移方式也发生变化：Bootstrap3通过col-sm-offset-4实现向右偏移4列，而Bootstrap4使用offset-sm-4，语法更简洁且支持更多尺寸断点。
4.响应式容器与显示控制
Bootstrap4新增响应式容器（如container-sm），当屏幕尺寸小于容器断点时自动占满宽度。隐藏/显示类彻底重构：Bootstrap3的hidden-xs/visible-xs等类被废弃，Bootstrap4引入d-sm-none/d-md-block等组合类，需注意向上兼容逻辑。例如，设置d-sm-none仅隐藏sm尺寸，但md及以上也会隐藏，需额外添加d-md-block等类实现精确控制。
5.其他改进
Bootstrap4移除了对IE8/9的支持，优化了JavaScript插件（如Modal、Dropdown），并引入Sass变量定制化主题，整体性能与扩展性显著提升。
Bootstrap4如何定制自己的颜色和风格
Bootstrap是现在最流行的CSS框架，有许多网站、后台管理系统的样式都是基于Bootstrap设计的。然而，Bootstrap始终保持着那蓝色+浅灰色彩基调，最新的 Bootstrap4也是如此，看久了难免有些审美疲劳。
怎么修改 Bootstrap的色彩主题呢？本篇就教你如何定制 Bootstrap4，使你的页面更与众不同一些。
0.需要的工具
Node.js编译
Bootstrap4、下载Bootstrap的依赖包，需要在电脑上安装 Node.jsBootstrap4源代码修改 Boostrap需要一份源代码，访问 Bootstrap官方网站（）可以下载到源代码。
有些地方可能无法访问 Bootstrap4官网，那么也可以访问 Bootstrap中文网下载到源代码。
1.定制颜色主题
Bootstrap为了方便定制，将一些变量提取了出来，放在 scss/_varaibles.scss文件中。
打开这个文件，可以发现有非常多的配置，找到这一段：
$primary:$blue!default;
$secondary:$gray-600!default;
$success:$green!default;
$info:$cyan!default;
$warning:$yellow!default;
$danger:$red!default;
$light:$gray-100!default;
$dark:$gray-800!default;
这里就是配置 Bootstrap基本色调的地方，修改这些颜色值，可以另网站看上去风格迥异。除了主色调，还有很多颜色相关的变量可以控制，细到一个输入框的边框夜色也可以调整。您可以慢慢尝试。
比如修改 _variables.scss的这些变量：
$primary:#e95420!default;
$secondary:#0e8420!default;
$success:#fff!default;
$light:#e8cd56!default;
$dark:#e95420!default;
$input-bg:#c34113;
$input-border-color:#c34113;
$input-placeholder-color:#ccc;
$input-color:#fff;
$jumbotron-bg: rgb(247, 247, 247);
就会得到 Ubuntu网站类似的色彩风格：
2.组件外观微调
除了调整颜色，_variables.scss还有很多变量，能对 Bootstrap组件的外观进行微调，比如：
$enable-shadows，控制一些弹出组件周围是否显示阴影
$enable-rounded，控制组件（按钮、输入框、下拉框等）周围是否显示为圆角
$enable-gradients，控制组件的背景是否显示微弱的渐变效果
这控制的变量还有很多，就不一一列举了。
4.编译 Bootstrap
修改完了变量，如何生成自己的 Bootstrap CSS文件呢？需要用 npm编译。
编译前需要先下载各种依赖包，通过 install命令搞定：
npm install
提示：Node.js默认npm官网下载依赖包，可能比较慢。建议从淘宝NPM镜像下载，速度很快：
先执行 npm install-g cnpm--registry=
然后在任何用到 npm命令的地方，都可以用 cnpm代替
依赖下载完之后执行编译：
npm run dist
稍等片刻，编译好的 css文件会出现在 dist/css/目录下，可以复制到你的项目中使用啦！
5.在 Webpack项目定制 Bootstrap
以上所说内容都是通过编译源代码的方式定制 Bootstrap4。如果想要在 Webpack项目中定制 Bootstrap4该怎么办呢？
直接修改 node_modules中的 Bootstrap源码不太合适。官方推荐的方式是，在项目中新建一个 custom.scss文件，把你想修改的变量写在里面：
//如果想修改 _variables.scss中的变量，请写在这里
$primary:#e95420!default;
$secondary:#0e8420!default;
...
//文件末尾请这样引入 Bootstrap的源码
@import"~bootstrap/scss/bootstrap";
然后在 Webpack编译时，把 custom.scss也加入到编译的文件列表中。这需要修改项目中的 webpack.config.js配置。
那么，webpack.config.js该怎么写呢？
答案就在 Boostrap4的官方文档里，您可以自己翻阅。也可通过这个微信号赞助我 1元，我会直接告诉您答案。谢谢各位土豪，您的支持就是我继续分享的动力！：-)
Axure 组件库,bootstrap4
该资源是一个仿 Bootstrap4样式的 Axure后台组件库，包含效果图及下载链接，提取码为 sp2v。以下是详细说明：
资源背景公司前端框架切换为 Bootstrap后，为提升设计效率，整理了一套适配 Axure的后台组件库。该库基于 Bootstrap4样式规范设计，覆盖常见后台界面元素，可直接用于原型设计。
图1：组件库整体界面效果核心内容样式覆盖范围包含按钮、表单、导航栏、卡片、表格、模态框等 Bootstrap4核心组件，所有元素均按 Bootstrap的栅格系统、间距规则和视觉风格设计。
按钮：提供 primary、secondary、success等状态样式，支持圆角、阴影等细节。
表单：包含输入框、下拉菜单、复选框等控件，匹配 Bootstrap的表单布局规范。
导航：支持顶部导航、侧边栏导航两种模式，适配不同后台布局需求。
图2：表单组件细节展示交互功能部分组件内置交互效果，例如：
模态框的弹出/关闭动画；
折叠面板的展开/收起状态切换；
表格的分页控件联动逻辑。
文件格式提供.rplib格式的 Axure组件库文件，可直接导入 Axure RP使用，支持快速拖拽调用。
图3：表格与卡片组件组合效果下载与使用
下载链接百度网盘链接（提取码：sp2v）
导入方法
打开 Axure RP，点击顶部菜单栏「库」→「加载库」；
选择下载的.rplib文件，完成导入；
在左侧组件面板中找到「Bootstrap4后台组件库」分类，拖拽使用。
注意事项
该组件库仅适用于 Axure RP 9/10版本，低版本可能存在兼容性问题；
组件样式基于 Bootstrap4默认主题，如需自定义颜色或尺寸，需在 Axure中手动调整；
资源作者欢迎反馈改进意见，可通过原链接页面留言或联系分享者。
此组件库可显著减少后台原型设计中的重复劳动，尤其适合需要快速验证交互逻辑或输出高保真原型的场景。
如果你还想了解更多这方面的信息，记得收藏关注本站。