bootstrap能用来干什么-猿码集

1. 什么是Bootstrap

Bootstrap是一款用于开发响应式和移动设备优先网站的免费开源框架。它包含了 HTML、CSS 以及 JavaScript 等组件，为开发者提供了一系列的工具来简化 Web 开发的流程。

Bootstrap 的目的是帮助开发者轻松快速地建立美观、响应式的网站，而无需为开发界面而浪费过多的时间。



<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. Bootstrap的优点

2.1 易于使用

Bootstrap提供一系列的组件和插件，它们可以轻松快速地集成到网站中，并且不需要过多的 CSS 或 JavaScript 代码。Bootstrap 的文档也十分详尽，而且是开源的，开发者可以随时在GitHub上查询，这些都让 Bootstrap 成为开发者的 “得力助手”。

2.2 美观 & 响应式

Bootstrap 直接提供了大量的组件，开发者可以通过添加不同的类来实现网站的样式。Bootstrap自带的响应式设计并不需要额外的工作，不同的设备与不同的浏览器都可以完美兼容。

2.3 跨浏览器兼容

Bootstrap 支持主流的浏览器，包括 Chrome、Firefox 和 Safari 等，还支持 Internet Explorer (IE) 浏览器，最新版已经支持 IE10 和 IE11 。这样，开发者可以放心地在多个浏览器和手机端上使用 Bootstrap，而无需担心兼容性的问题。

2.4 可定制性强

虽然 Bootstrap 提供了一系列的元素与CSS 样式，但是开发者仍然可以根据自己的需求来进行修改或者定制。Bootstrap 提供了方便的文档和定制工具，开发者可以很方便地实现自己的设计。

3. Bootstrap的组件

3.1 栅格系统

Bootstrap提供了一个12列的栅格系统，让页面布局更加灵活。开发者可以基于栅格系统来进行布局，使得元素在不同的屏幕上显示更加灵活、美观。


<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

在上述代码中，col-md-4 表示该元素占用了栅格系统的 4 个列，这个元素是响应式的，当屏幕大小小于 992px 时，它会变成一个独立的块元素。该元素将会在桌面上占用 33.3% 的宽度。

3.2 导航栏

Bootstrap提供了多种样式的导航栏，包括普通菜单栏、下拉菜单、折叠菜单等。开发者可以根据自己的需求来选择不同的菜单栏风格，以增强网站的用户体验。


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>
</nav>

在上述代码中，nav 表示导航栏，navbar 表示导航栏的样式。navbar-default 表示导航栏的默认样式。navbar-header 是用来定义导航栏标题区域的。

3.3 表格

Bootstrap提供了多种样式的表格，开发者可以通过添加不同的类来自定义表格样式。表格组件包括了表格、表格内联表格、表格边框以及表格斑马线等功能。


<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

在上述代码中，table 表示表格，table-striped 表示斑马线表格样式，thead 与 tbody 分别为表头和表体。tr 表示表格中的行，td 表示表格中的单元格，th 表示表格的表头单元格。

3.4 表单

Bootstrap提供了多种样式的表单，包括文本输入、复选框、单选按钮等。尤其是在移动端，Bootstrap 的表单样式会让用户更加方便地使用。


<form>
  <div class="form-group">
    <label for="inputUsername">Username:</label>
    <input type="text" class="form-control" id="inputUsername" placeholder="Enter username">
  </div>
  <div class="form-group">
    <label for="inputPassword">Password:</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Enter password">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Login</button>
</form>

在上述代码中，form 表示表单，form-group 表示表单中的组元素。label 用来创建表单标签，input 用来创建表单输入框，checkbox 表示复选框形式的表单，submit 为提交按钮，btn 表示按钮，btn-default 表示默认样式的按钮。

3.5 弹窗

Bootstrap 的弹窗组件可以让开发者快速地弹出对话框、提示、警告等窗口，来增强用户体验。


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

在上述代码中，btn表示按钮，btn-primary 表示按钮的主色调，data-toggle 属性用于指定该按钮用于触发弹窗，data-target 属性用于指定该弹窗的 id，.modal 表示弹窗样式，.fade 表示淡入淡出效果。

4. 总结

Bootstrap 是一个非常优秀的前端框架，可以使开发者更加方便、快速地完成网站的开发。强大的组件和插件、易于上手的文档，以及灵活可定制的特性，为开发人员提供了全新的 Web 开发体验。

bootstrap能用来干什么