一般用bootstrap干什么用的-猿码集

1. 什么是Bootstrap

Bootstrap是一个流行的前端开发框架，可用于创建响应式、移动设备友好的Web应用程序。

Bootstrap旨在帮助开发人员创建现代Web应用程序，而无需编写大量的CSS、JavaScript等代码。它提供了一套标准化的UI组件、网格系统、JavaScript插件和样式，可以快速轻松地搭建起一个美观且功能齐全的网站。

 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello, world!</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Hello, World!</h1>
  <p>This is my first Bootstrap website!</p>
</div>
</body>
</html>

2. 响应式布局

响应式设计是一种让Web应用程序适应不同设备尺寸的设计技术。Bootstrap针对各种设备尺寸提供了一套统一的响应式布局，开发人员可以根据实际需求选择合适的布局。

2.1 网格系统

Bootstrap的网格系统基于12列的布局，每个列可以占用不同的宽度，这使得页面元素可以在各种设备上合理分布。在HTML中，可以用class="col-md-4"的方式指定每一列的宽度。

例如：

 
<div class="container">
  <div class="row">
    <div class="col-sm-4"><p>Column 1</p></div>
    <div class="col-sm-4"><p>Column 2</p></div>
    <div class="col-sm-4"><p>Column 3</p></div>
  </div>
</div>

在上面的例子中，三个列的宽度都是相等的，每个列占据了页面宽度的1/3。如果需要实现不同的布局效果，在实际开发过程中，只需要修改class="col-md-4"的值即可。

2.2 响应式工具类

Bootstrap还提供了一些响应式工具类，开发人员可以通过这些工具类来控制页面元素在不同设备上的表现。比如，.d-none可以让元素在某个设备上隐藏，.d-md-block可以让元素在某个设备以上显示。

例如：

 
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 d-none d-md-block"><p>Column 1</p></div>
    <div class="col-sm-12 col-md-6"><p>Column 2</p></div>
  </div>
</div>

在上面的例子中，第一个列的宽度是在小屏幕下占用了整个页面的宽度，在中等屏幕上占用了页面宽度的一半，同时还通过工具类.d-none .d-md-block设置了在小屏幕下隐藏，中等屏幕以上显示的效果。

3. UI 组件

Bootstrap提供了一套美观且易于定制的UI组件，包括按钮、导航、表单、标签、进度条、模态框等等。这些组件可以快速地搭建一个功能齐全的Web界面，同时提供了良好的用户体验。

3.1 导航

导航组件可以用于创建不同类型的导航菜单，包括水平导航、响应式导航、标签页导航等等。例如，可以使用.nav.nav-tabs和.nav.nav-pills来创建选项卡式的导航菜单。

例如：

 
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

在上面的例子中，使用了.nav.nav-tabs和.nav.nav-pills分别创建了选项卡式和胶囊式的导航菜单。同时，.active可以指定当前选中的菜单项。

3.2 模态框

模态框可以用于在Web界面中显示一些交互式的内容，比如对话框、提示框等等。Bootstrap提供了强大且易于使用的模态框组件，可以轻松地创建需要的模态框。

例如：

 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

在上面的例子中，可以使用data-toggle="modal"、data-target="#myModal"来控制模态框的显示和隐藏。模态框的内容位于.modal-dialog中，可以包含模态框头部.modal-header、模态框主体.modal-body、模态框底部.modal-footer等部分。同时，还可以使用data-dismiss="modal"来控制模态框的关闭。

4. 插件

Bootstrap还提供了一些实用的JavaScript插件，比如轮播图、折叠面板、工具提示等等。这些插件可以很方便地在Web应用程序中使用，同时也可以根据需要进行定制。

4.1 轮播图

轮播图是一种常用的Web展示方式，可以轮流展示多个图片或内容。Bootstrap提供了一个简单易用的轮播插件，可以很方便地实现轮播效果。

例如：

 
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  
  <ul class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ul>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img1.jpg" alt="Image 1">
    </div>
    <div class="carousel-item">
      <img src="img2.jpg" alt="Image 2">
    </div>
    <div class="carousel-item">
      <img src="img3.jpg" alt="Image 3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  
</div>

在上面的例子中，使用了.carousel、.carousel-indicators、.carousel-inner和.carousel-item等类来创建轮播图。通过data-target="#myCarousel"和data-slide-to="0"等属性来指定轮播图的具体内容。同时，还可以使用.carousel-control-prev和.carousel-control-next来控制轮播图的左右移动。

4.2 折叠面板

折叠面板可以将页面内容按一定的方式进行折叠和展开，可实现一种简洁美观的效果。Bootstrap提供了.collapse和.collapsing类，可以轻松实现折叠面板效果。

例如：

 
<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapseOne">Section 1</a>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Some text...
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">Section 2</a>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Some other text...
      </div>
    </div>
  </div>
</div>

在上面的例子中，使用了.card、.card-header和.card-body来设置面板的样式，同时通过.collapse和.collapsing类来实现面板的折叠和展开。通过data-toggle="collapse"和data-parent="#accordion"等属性来控制面板的打开方式和面板的层次结构。

总结

Bootstrap是一个强大且易于使用的前端开发框架，使用它可以快速搭建一个现代化的Web应用程序。它提供了响应式布局、统一的UI组件、实用的JavaScript插件，大大减轻了前端开发的工作量。通过本文对Bootstrap的介绍，相信大家已经掌握了基本的使用方法，并能够根据实际需求进行定制和扩展。

一般用bootstrap干什么用的