前端快速开发框架BootStrap示例

参考
为什么前端工程师多不愿意用 Bootstrap 框架？
boostrap入门示例
 Github bootstrap
http://getbootstrap.com/
《Node.js开发指南 ByVoid》 Page104

作为后端开发者，你可能和我一样都不太擅长设计，不过没关系，我们可以利用已有的优秀设计。如果你认同 Twitter 的简洁风格，那么 Twitter Bootstrap 是最好的选择。TwitterBootstrap 是由 Twitter 的设计师和工程师发起的开源项目，它提供了一套与 Twitter 风格一致的简洁、优雅的 Web UI，包含了完全由 HTML、CSS、JavaScript 实现的用户交互工具。不管你是资深的前端工程师，还是专业的后端开发者，你都可以轻松地使用Twitter Bootstrap 制作出优美的界面。

一、简单示例

需要使用Jquery，官网示例对Jquery使用了这种加载方式

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>

具体参考Subresource Integrity，HTML5 script 标签的 crossorigin 属性到底有什么用

我在Github bootstrap和Jquery官网把代码都下载了，简单示例如下

    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <button type="button" class="btn btn-primary">提交按钮</button>
    <button type="button" class="btn btn-success">成功按钮</button>
    <button type="button" class="btn btn-danger">危险按钮</button>
    <script src="jquery-3.3.1.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
    <script src="assets/js/vendor/holder.min.js"></script>
  </body>

更多示例参考boostrap入门示例

前端快速开发框架BootStrap示例

一、简单示例

推荐阅读更多精彩内容