Bootstrap

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文件的外链中

注意事项：

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

三、全局CSS样式

1、布局容器

1.1、左右留白


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

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


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

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


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>
<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-4div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4div>
div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3div>
div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3div>
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	标识危险或潜在的带来负面影响的动作


<tr class="active">...tr>
<tr class="success">...tr>
<tr class="warning">...tr>
<tr class="danger">...tr>
<tr class="info">...tr>
 
<tr>
  <td class="active">...td>
  <td class="success">...td>
  <td class="warning">...td>
  <td class="danger">...td>
  <td class="info">...td>
tr>

6、表单

对表单中的控件进行美化

7、按钮

可作为按钮使用的标签或元素：、

按钮颜色


<button type="button" class="btn btn-default">（默认样式）Defaultbutton>
 
<button type="button" class="btn btn-primary">（首选项）Primarybutton>
 
<button type="button" class="btn btn-success">（成功）Successbutton>
 
<button type="button" class="btn btn-info">（一般信息）Infobutton>
 
<button type="button" class="btn btn-warning">（警告）Warningbutton>
 
<button type="button" class="btn btn-danger">（危险）Dangerbutton>
 
<button type="button" class="btn btn-link">（链接）Linkbutton>

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、图标

图标的使用


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>
 
body>
html>

专门图标网站：https://fontawesome.com.cn/

相关阅读:
为了工作刷题
计算机网络-计算机网络体系结构-应用层
2022-08-27 第五组张明敏学习笔记
SIMULIA-Simpack 2022x新功能介绍
（附源码）SSM青年旅社订单管理系统计算机毕设16224
【一】redis简介
【软考-中级】系统集成项目管理工程师【19 项目收尾管理】
爱上开源之golang入门至实战第四章函数(Func)(三)
WINDOWS下对NIGNX日志文件进行限制
使用 GitHub Actions 通过 CI/CD 简化 Flutter 应用程序开发

原文地址：https://blog.csdn.net/m0_69962105/article/details/134268541