系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
Magento 2 使用了 Bootstrap 作为界面库，提供了一些常用的 UI 组件，如网格系统、表单、按钮等。
下面是一个简单的 Magento 2 Bootstrap 代码示例，其中包含了一些常用的组件：
<div class="container"> <div class="row"> <div class="col-md-6"> <form> <div class="form-group"> <label for="input-name">姓名：</label> <input type="text" class="form-control" id="input-name"> </div> <div class="form-group"> <label for="input-email">邮箱：</label> <input type="email" class="form-control" id="input-email"> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> <div class="col-md-6"> <img src="example.jpg" alt="Example image" class="img-thumbnail"> </div> </div> </div>
上述代码使用了 Bootstrap 的网格系统、表单和按钮组件。需要注意的是，在 Magento 2 的布局文件中，需要引入 Bootstrap 的 CSS 和 JavaScript 文件：
<head> <css src="Magento_Theme::css/bootstrap.min.css"/> <css src="Magento_Theme::css/bootstrap-theme.min.css"/> <script src="Magento_Theme::js/bootstrap.min.js"/> </head>
这样才能正确加载 Bootstrap 的样式和脚本。
另外，如果需要对 Bootstrap 组件进行定制，可以参考 Magento 2 的源代码中 lib/web/css/source/lib/bootstrap 文件夹，这些文件包含了 Bootstrap 的基础样式和变量。