Bootstrap引入和使用

Bootstrap是一个开源的前端框架，用于对HTML和CSS代码进行封装，因此可以直接在标签中加入现成的属性来实现需求v3官方文档库：官方书写好了大量现成的CSS样式以及组件。

文章共2,849字 · 阅读需要大约10分钟

一键AI生成摘要，助你高效阅读

问答

AZURE060606

1494人浏览 · 2024-02-26 16:51:43

AZURE060606 · 2024-02-26 16:51:43 发布

Bootstrap 基础用法

什么是Bootstrap？

Bootstrap是一个开源的前端框架，用于对HTML和CSS代码进行封装，因此可以直接在标签中加入现成的属性来实现需求

v3官方文档库：官方书写好了大量现成的CSS样式以及组件

引入Bootstrap

cdn引入（仅演示v3版本）：

// 引入jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

// 引入Bootstrap的CSS文件
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

// 引入Bootstrap的JavaScript文件
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

布局容器

Bootstrap 提供了三种类型的容器：

.container、.container-fluid 和 .container-xl

.container 是一个固定宽度的容器，其宽度根据不同设备的断点进行自适应调整
.container-fluid 是一个占据全部可用宽度的容器，适用于全屏或宽度铺满的布局需求
.container-xl 是一个额外宽度的容器，可以使用它来实现超出常规容器宽度的特殊布局

</head>
	<style>
       .container{
            background-color: red;
       }
       .container-fluid{
           background-color: green;
       }
       .container-xl{
           background-color: yellow;
       }
    </style>
</head>
<body>
<div class="container">你好</div>
<div class="container-fluid">世界</div>
<div class="container-xl">再见</div>
</body>

栅格系统

栅格系统的基本单位是行（row）和列（column）
使用 .row 类在容器内创建行，默认12列
使用 .col-*-* 类将行划分为不同的列，其中第一个星号表示列在小屏幕上的占比，第二个星号表示列在中等屏幕上的占比
- col-xs：额外小屏幕
- col-sm：小屏幕
- col-md：中等屏幕
- col-lg：大屏幕

使用offset可以将列向右移动指定数量的列数

<head>
    <style>
       .row{
           background-color: red;
       }
       .col-md-1{
           background-color: green;
       }

    </style>
</head>
<body>
<div class="row">
    <div class="col-md-1">我是col1</div>
    <div class="col-md-1 col-md-offset-1">我是col2，我右移了一位</div>
</div>
</body>

表格样式

.table 类创建基本的表格

<div>
    <table class="table">
        <tr>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>b</td>
            <td>b</td>
            <td>b</td>
        </tr>
    </table>
</div>

.table-striped 为表格的每一行添加斑马纹样式。
.table-bordered 创建带边框的表格
.table-hover 在鼠标悬停时对表格行进行高亮显示
.table-sm创建紧凑型的表格
.table-responsive 创建响应式的表格，当表格内容超出容器宽度时会自动出现滚动条

表单样式

仅做部分演示，完整内容请前往v3官方文档库
在Bootstrap中表单样式优先考虑.form-control，但是对radio和checkbox无效

text样式

示例：

<input type="text" class="text-primary">

.text-primary：设置文本颜色为主要颜色
.text-secondary：设置文本颜色为次要颜色
.text-light：设置文本颜色为浅色（通常用于暗色背景）
.text-dark：设置文本颜色为深色（通常用于亮色背景）
.font-weight-bold：设置文本字体为粗体
.font-italic：设置文本字体为斜体
.text-uppercase：将文本转换为大写字母
.text-lowercase：将文本转换为小写字母
.text-capitalize：将每个单词的首字母转换为大写
.text-left：左对齐文本
.text-right：右对齐文本
.text-center：居中对齐文本
.text-justify：两端对齐文本
.text-nowrap：防止文本换行，使其保持在一行内显示

按钮样式

示例：

<button type="button" class="btn btn-default">（默认样式）Default</button>

btn btn-default：默认样式
btn btn-primary：首选项
btn btn-success：成功
btn btn-info：一般信息
btn btn-warning：警告
btn btn-danger：危险
btn btn-link：连接
btn btn-primary btn-lg：大按钮
btn btn-default btn-lg：大按钮
btn btn-primary：默认尺寸
btn btn-default：默认尺寸
btn btn-primary btn-sm：小按钮
btn btn-default btn-sm：小按钮
btn btn-primary btn-xs：超小按钮
btn btn-default btn-xs：超小按钮

图标

图标类不能在同一个元素上与其他类共同存在
应创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上

示例：

<!--    在按钮中加上图标-->
    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-star"></span> Star
    </button>