前端（十三）bootstrap的基本使用

bootstrap的基本使用

文章目录

bootstrap的基本使用
一、bootsrtap简介
二、布局容器
三、栅格系统
四、组件

一、bootsrtap简介

Bootstrap 是一个开源的前端框架，用于快速设计和定制响应式的网站和Web应用。它包含了一系列的HTML、CSS和JavaScript工具，可以帮助开发者快速构建出美观、响应式的用户界面。

其包含以下的一些特征：

响应式设计：Bootstrap提供了一系列的CSS类，使得网站能够自动适应不同大小的屏幕，包括手机、平板和桌面显示器。
预定义的组件：Bootstrap包含了大量的预定义组件，如按钮、表单、导航栏、卡片、模态框等，这些组件可以快速地添加到你的项目中，无需从头开始设计。
栅格系统：Bootstrap提供了一个12列的栅格系统，可以帮助开发者轻松地创建复杂的布局。通过简单的类名，可以将内容分布在不同的列中，实现响应式布局。
JavaScript 插件：Bootstrap包含了一系列的JavaScript插件，如下拉菜单、模态框、轮播图等，这些插件可以增强用户界面的交互性。
易于定制：Bootstrap的CSS和JavaScript都是可定制的，开发者可以根据自己的需求修改主题颜色、字体、间距等样式。

下面就bootsrap4的一些基本功能做简单的介绍。

bootstrap4的下载具体可以参考bootstrap中文网，如想使用cdn可以引入下面的代码：

html 复制代码

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

二、布局容器

bootsrap中的所有内容必须包含在布局容器中：

html 复制代码

<body>
	<div class="container">
	<!--具体内容-->
	</div>
</body>

上面例子中的container类表示页面内容居中显示且两边会保留部分空白，container-fluid则表示页面内容占满整个屏幕，另外container-sm、container-md、container-lg、container-xl等，其具体细节可以参考bootstrap中文网布局中的详细说明。

三、栅格系统

bootstrap中采用栅格系统完成具体内容在容器中的布局，具体是一行会被划分为12格，可以通过指定占用格子的比例控制内容占每一行的多少：

html 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        .p1{background-color: #007bff;text-align: center;border: 1px double black}
    </style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-sm-4 p1">
      内容1
    </div>
    <div class="col-sm-4 p1">
      内容2
    </div>
    <div class="col-sm-4 p1">
      内容3
    </div>
  </div>
</div>
</body>
</html>

col-sm-4类的功能是将一行的12个栅格划分为三份，每四格一份，而三个内容分别占一份的空间。当然上方例子中的col-sm-4也可写为三个col-sm，bootstrap会自动将一行分为三份。

如果想将内容写在两行中可以这么写：

html 复制代码

<div class="container">
    <!--第一行-->
  <div class="row">
    <div class="col-sm-4 p1">
      内容1
    </div>
    <div class="col-sm-4 p1">
      内容2
    </div>
    <div class="col-sm-4 p1">
      内容3
    </div>
  </div>
     <!--第二行-->
  <div class="row">
    <div class="col-sm p1">
      内容4
    </div>
    <div class="col-sm p1">
      内容5
    </div>
  </div>
</div>

另外如果一行中划分的比例不足12格，bootstrap会将部分的格子空出来；如果划分的比例超过了12格，放不下的内容会被移到下一行中。

html 复制代码

<div class="container">
    <!--不足12格-->
  <div class="row">
    <div class="col-sm-5 p1">
      内容1
    </div>
    <div class="col-sm-5 p1">
      内容2
    </div>
  </div>
</div>

html 复制代码

<div class="container">
    <!--超过12格-->
  <div class="row">
    <div class="col-sm-5 p1">
      内容1
    </div>
    <div class="col-sm-5 p1">
      内容2
    </div>
    <div class="col-sm-5 p1">
      内容3
    </div>
  </div>
</div>

此外bootstrap还提供了偏移功能，可以实现内容居中的效果。

html 复制代码

<div class="container">
  <!--第一行通过栅格偏移实现内容居中效果-->
  <div class="row">
    <div class="offset-sm-3 col-sm-6 p1">
      居中内容
    </div>
  </div>
  <!--第二行内容不居中-->
  <div class="row">
    <div class="col-sm-6 p1">
      内容2
    </div>
    <div class="col-sm-6 p1">
      内容3
    </div>
  </div>
</div>

bootstrap中的sm、md、lg、xl是为适应不同屏幕大小而设计的(例如使用手机打开浏览器和使用电脑打开浏览器时屏幕大小显然是不同的)，如果想让我们的页面能适应多种屏幕尺寸，可以将其全部写在类中，其具体的尺寸情况依然参考bootstrap中文网布局中的内容。

html 复制代码

<div class="container">
  <div class="row">
    <div class="col-sm col-md col-lg col-xl p1">
      内容1
    </div>
  </div>
</div>

四、组件

组件咱们以form表单的控制为例讲解一下使用方法，其他的组件可以取bootstrap中文网查看具体的使用方法，直接复制示例的内容根据自己的需求做一定修改即可。

表单中常用的是form-group类，在text和password的类型中设置form-control类可以让文本框显示为大文本框且占一整行，而btn btn-primary则为控制按钮样式的类，当然还有其他的许多样式，依然可以参考bootstrap中文网的内容。

html 复制代码

<div class="container">
    <form action="" class="form-group">
        <label for="user">用户：</label>
        <input type="text" class="form-control" name="username" id="user">
        <label for="pwd">密码：</label>
        <input type="password" class="form-control" name="password" id="pwd">
        <input type="submit" class="btn btn-primary">
    </form>
</div>