Bootstrap

m0_69962105

已于 2023-11-07 21:27:08 修改

阅读量90

点赞数

文章标签： bootstrap 前端 html

于 2023-11-07 17:17:00 首次发布

本文链接：https://blog.csdn.net/m0_69962105/article/details/134268541

版权

Bootstrap中所有样式给已经写好了，要想使用，直接复制粘贴即可。

如要改变样式，修改class值就行

一、Bootstrap简介

Bootstrap是是一款完全开源的HTML、CSS、JS框架，让前端开发更快速、简单。
前端开源项目CDN加速服务
- 稳定
- 快速
- 免费
版本问题
- Bootstrap v3
  - 支持IE8+浏览器
  - 依赖jQuery
- Bootstrap v4
  - 支持IE10+ 浏览器
  - 支持Flexbox布局
  - 不依赖jQuery
- Bootstrap v5
  - 支持Flexbox布局
  - 支持Grid布局
  - 支持CSS自定义属性
  - 不依赖jQuery
  - 不支持IE浏览器

二、如何使用Bootstrap

Bootstrap网址：Bootstrap中文网

下载（2种方式）：

第一种：将Bootstrap下载到本地。下载的是压缩包，将压缩吧解压。把解压的文件夹导入到测试环境中即可。

第二种：引入外链(引入外链后直接可以使用)：

Bootstrap核心CSS文件：
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
Bootstrap核心JS文件：
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
引入地址：将外链引入到 .html文件的<head>外链</head>中

注意事项：

如果是Bootstrap v3版本还需引入jQuery（可引入外链也可下载到本地）

三、全局CSS样式

1、布局容器

1.1、左右留白

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

1.2、占据全部视口，宽度：100%

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

2、栅格系统（总共12列）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <style>
        .c1 {
            height: 100px;
            border: 2px solid black;
        }


    </style>
</head>
<body>
</*两边留白*/>
</*若想全局沾满只需将class属性值改成container-fluid即可*/>
<div class="container">
    <div class="row">
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="c1 col-md-1"></div>
        <div class="col-md-8 c1 col-md-offset-4"></div>
    </div>
</div>

<div class="row">

/*写一个row就是将一个布局划分成12份*/




<div class="col-md-1"></div>


/*写一个col-md-1就是将获取想要的份数*/

3、列偏移(col-md-offset-4)

<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-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

4、排版

将文本样式，如：页面主体，列表等变得更加的美观

5、表格

5.1、基本表格

<table class="table">
    ...
</table>

5.2、条纹状表格

<table class="table table-striped">
    ....
</table>

5.3、带边框的表格

<table class="table table-bordered">
    ....
</table>

5.4、鼠标悬停

<table class="table table-hover">
    ....
</table>

5.5、紧缩表格

<table class="table table-condensed">
    ....
</table>

5.6、表格颜色

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

6、表单

对表单中的控件进行美化

7、按钮

可作为按钮使用的标签或元素：<a>、<button>、<input>元素添加按钮类，即可使用Bootstrap提供的样式
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

按钮颜色

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

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

8、图片

图片形状

/*img-rounded：正方形*/
<img src="..." alt="..." class="img-rounded">
/*img-circle：圆形*/
<img src="..." alt="..." class="img-circle">
/*img-thumbnail：边框*/
<img src="..." alt="..." class="img-thumbnail">

9、图标

图标的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<span class="glyphicon glyphicon-eur"></span>
<span class="glyphicon glyphicon-cog"></span>
<span class="glyphicon glyphicon-thumbs-up"></span>

<!--<i class="fa fa-camera-retro"></i> fa-camera-retro-->
</body>
</html>