前端开发框架Bootstrap

最新推荐文章于 2026-06-25 10:13:02 发布

原创最新推荐文章于 2026-06-25 10:13:02 发布 · 354 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web移动端

本文介绍了前端开发框架Bootstrap的使用步骤，包括创建文件夹结构、HTML骨架、引入样式文件和书写内容。详细讲解了Bootstrap的布局容器，如.container类和.container-fluid类，以及其响应式的栅格系统，该系统基于12列布局，支持多种屏幕尺寸的适配。还涵盖了列偏移、嵌套列、列排序和响应式工具的使用。

Bootstrap简介

使得web开发更加便捷。

Bootstrap使用四部曲：
1、创建文件夹结构；
2、创建html骨架结构；
3、引入相关样式文件；
4、书写内容。

1、创建文件夹结构；
创建自己的文件夹和bootstrap文件夹，并将bootstrap下载的文件放入里面。
2、创建html骨架结构
按照以下这份简单的 HTML 模版创建即可

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

3、引入相关样式文件
引入需要的样式表

		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

4、书写内容
在body里书写内容即可。

可以利用自己书写的样式覆盖之前的样式。没有效果的话提权

布局容器

为网页内容和栅格化系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container
1.container类

响应式布局的容器，固定宽度
大屏（>=1200px）宽度固定为1170px
中屏（>=992px）宽度固定为970px
小屏（>=768px）宽度固定为750px
超小屏（100%）

2、container-fluid类

流式布局容器百分百宽度
占据全部视口（viewport）的容器。
适合于单独做移动端开发。

Bootstrap 栅格系统

栅格系统（gridsystems）
把页面内容划分为若干个等宽的列，Bootstrap 栅格系统划分为12列，相当于把container划分为12份。

rem是把整个屏幕划分为若干等份。
格栅选项参数
格栅系统通过一些列行row和列column的组合来创建页面布局。

大屏（>=1200px）宽度固定为1170px ，类前缀.col-lg-
中屏（>=992px）宽度固定为970px ,类前缀.col-md-
小屏（>=768px）宽度固定为750px,类前缀.col-sm-
超小屏（100%）,类前缀.col-xs-

注意：

行必须放到container布局容器里面
要实现列的平均划分，需要给列添加类前缀
列大于12时，多余的列会另起一行显示
每列默认有大约15像素的padding值
可以为一列同时指定多个设别的类名，以便划分不同的份数，例如：class=‘col-md-4 col-sm-6’

嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

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

<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

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

响应式工具
可用的类
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

超小屏幕手机 (<768px)
.visible-xs-* 可见 .hidden-xs 隐藏
小屏幕平板 (≥768px)
.visible-sm-* 可见 .hidden-sm 隐藏
中等屏幕桌面 (≥992px)
.visible-md-* 可见 .hidden-md 隐藏
大屏幕桌面 (≥1200px)
.visible-lg-* 可见 .hidden-lg 隐藏

标签

#bootstrap #css #html