Bootstrap（v3）前端开发框架

最新推荐文章于 2024-05-07 22:58:19 发布

法外狂徒张三！

最新推荐文章于 2024-05-07 22:58:19 发布

阅读量928

点赞数 14

分类专栏：移动端开发文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/weixin_65350557/article/details/138127638

版权

移动端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简介：

Bootstrap 是一个流行的前端开发框架，由 Twitter （推特）开发并维护。它是一个开源的工具包，用于创建响应式和移动设备优先的网站和 Web 应用程序。Bootstrap 提供了一套用于网页设计和开发的 HTML、CSS 和 JavaScript 组件，其中包括按钮、表单、导航、模态框、网格系统等等。

官网：http://getbootstrap.com/

中文官网：http://www.bootcss.com

可以根据自己的需求选择合适的版本。Bootstrap 2 以前的版本已经停止维护和支持。本篇文章主要讲解的是v3版本。

1. Bootstrap-v3使用：

在HTML文件中引入Bootstrap-v3的CSS以及JavaScript文件以及字体图标，可以从官网下载文件，也可以通过CDN引用，下载压缩包，解压后在自己项目的合适目录下面存好，用<link>/<script>引入即可。下载如下所示的这个就可以，当然如果你想研究源码，可以看看第二个。

官网也有使用CDN引用的代码，直接复制粘贴就好。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

注意：Bootstrap使用时需要HTML5文档类型，也就是在HTML文档第一行写这么句代码：

<!doctype html>

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

如果你使用的是vs-code编辑器，直接！＋tab键直接生成骨架即可，不需要手动输入。

2. 全局CSS样式

2.0 布局容器：

Bootstrap需要一个容器，把页面内容包裹起来，Bootstrap提供了两个类，一个是.container（固定宽度、支持响应式布局），另一个是.container-fluid（占据全部视口）。一个页面里可以有很多布局容器，不是所有元素都需要用布局容器，根据自己的需求而定。

<div class="container">
  ...
</div>

这个类是预定义类，也就是不需要手动写媒体查询，就可以直接实现响应式布局，而.container-fluid这个类，其实就是流式布局容器，它是百分百宽度的，适合单独做移动端开发。

2.1栅格系统

2.1.1 参数与基本应用

也叫网格系统，其实就是把页面划分成等宽的列，当页面宽度变小时候，格子里面的内容也会随之变化。Bootstrap的栅格系统将页面分为十二列。先有行后有列，即先在容器里面创建.row类，再在行里面设置自己需要的列。对于不同屏幕，类前缀是不同的，具体如下：

以中等屏幕为例，.col-md-1即为十二份中的一份，下面代码就是将一行分为两份，其中一列占一行的三分之二，另一列占其中的三分之一。效果如下：

<div class="row">
  <div class="col-md-8">1</div>
  <div class="col-md-4">2</div>
</div>

如果份数加在一起，小于12会占不满整个container、如果大于12，最后一列会掉到下面去。可以给盒子添加多类名，比如：在超小屏幕下（手机），和小屏幕下（平板）.PS:每个小格子会有默认的内边距，想去掉的话用css直接padding：0就行。除此之外，还有删除网格间距等等，在官网查看即可，就不再赘述了。

<div class="row">
  <div class="col-xs-12 col-sm-8">1</div>
  <div class="col-xs-6 col-sm-4">2</div>
</div>

2.1.2 列嵌套、列偏移、列排序

（1）列嵌套

先举个例子吧，这个例子是在一行拆成三等分的前提下，将第一列再拆分成两等份，其实就是把父盒子再分成十二份，然后按照上面方法继续划分。所以叫列嵌套，说白了就是把每个容器分成十二份，根据自己需求设定各占多少份。注意：列嵌套的时候最好在里面加一个row，这样可以取消父元素的padding值。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">1</div>
                <div class="col-md-6">1</div>
            </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
     </div>
</div>

（2）列偏移

通过.col-md-offset-*实现，实际上源码上就是给这个元素加margin，如果你想让元素向右侧偏移四个列的宽度：

<div class="container">
    <div class="row">
      <div class="col-md-4">移动前</div>
      <div class="col-md-4 col-md-offset-4">移动后</div>
    </div>
</div>

（3）列排序

通过.col-md-push-*和.col-md-pull-*实现，push是推，pull是拉，理解还是挺简单的，就前面的盒子往后推，后面的盒子往前拉，切记，不要只动一个，不然会把另一个压住。不过，说实话，这个方法用的不多，几乎不怎么用，了解一下也就行了。

<div class="row">
  <div class="col-md-9 col-md-push-3">2</div>
  <div class="col-md-3 col-md-pull-9">1</div>
</div>

2.2 其他样式

除了出名的栅格系统，Bootstrap还提供了许多常见的样式，比如表格、表单、按钮、图片等等......比如斑马条纹样式表格，只需要设置表格类为.table-striped即可。鼠标悬停时表格颜色变化，只需要设置类为.table-hover即可。

其他具体示例请看：Bootstrap v3 css表格示例

其他的样式也均可在官网查看相关示例，就不一一解释了。

3.组件

Bootstrap自带了很多可复用的组件，包括很多字体图标、下拉菜单、导航栏等等

下列是自带的警告框示例：

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

有这些强大便捷的组件，我们就不需要费力费时间的去写样式了，如果想修改，就利用CSS层叠性再覆盖一下就行了。更多实例请在https://v3.bootcss.com/components/#glyphicons查询。

4.JavaScript 插件

4.1 过度效果

对于简单的过渡效果，只需将 transition.js 和其它 JS 文件一起引入即可。通过下面的 JavaScript 代码可以在全局范围禁用过渡效果，并且必须将此代码放在 transition.js 后面，确保在 js 文件加载完毕后再执行下面的代码：

$.support.transition = false

4.2 模态框

点击按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。

<!-- 按钮 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo 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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">标题</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

其他js插件请仔细查询https://v3.bootcss.com/javascript/#dropdowns