前端框架 — Bootstrap-优快云博客

本文链接：https://blog.youkuaiyun.com/Struggle_Hard_Z/article/details/123113479

本文主要探讨了前端框架Bootstrap，包括其布局容器、栅格系统、表格、按钮组和图标的使用，为开发者提供了一个快速构建响应式和移动设备优先的网页设计的工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端框架Bootstrap

# 官网：https://v3.bootcss.com/

# 下载步骤
	1.进入官网直接点击下载
	2.选择用于生产环境的Bootstrap下载
	3.下载的压缩包 自行解压到能找到的文件路径
	4.使用框架调整页面样式一般都是操作标签的class属性即可

    
# bootstrap需要依赖于jQuery才能正常执行(动态效果)


# 引入方式
	本地引入(最完整的)
		1.引入jQuery
		2.引入bootstrap的css文件
		3.引入bootstrap的js文件
        
	CDN引入
		1.引入jQuery CDN
		2.引入bootstrap css的 CDN
		3.引入bootstrap js的 CDN
"""
CDN导入可以都写到pycharm默认文本模板中 今后在新建HTML文件就会自动添加：
进入 https://www.bootcdn.cn/twitter-bootstrap/ 官网
找到对应版本 选择复制链接

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
"""

在这里插入图片描述

布局容器

"""
第一次使用该框架的时候最好采用本地导入的方式 
让pycharm记住bootstrap的关键字
"""
container		左右留白
container-fluid  左右不留白



# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>牛逼的网站</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .c1 {
            background-color: red;
            height: 200px;
        }
    </style>
    
</head>
<body>
  <div class="container c1">左右留白布局</div>
  <div class="container-fluid c1">左右不留白布局</div>

</body>
</html>

在这里插入图片描述

栅格系统

	# 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

row		行  # 一个row就是一行 一行是固定的12份
col-md-1	占几份
col-sm-1	占几份
col-xs-1	占几份
col-lg-1	占几份

HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>牛逼的网站</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .c1 {
            background-color: red;
            height: 200px;
            border: 5px solid black;
        }
    </style>

</head>
<body>
  <div class="container">
      <div class="row">
          <div class="col-md-6 c1 col-sm-6"></div>
          <div class="col-md-6 c1 col-sm-6"></div>
      </div>
  </div>
</body>
</html>

请添加图片描述

表格

	# 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线


# 条纹状表格
	通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式

# 带边框的表格
	添加 .table-bordered 类为表格和其中的每个单元格增加边框

# 鼠标悬停
	通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
    
# 紧缩表格
	通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半

# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>牛逼的网站</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">用户数据</h2>
            <table class="table table-hover table-striped table-bordered">
                <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>pwd</th>
                </tr>
                </thead>

                <tbody>
                <tr class="success">
                    <th>001</th>
                    <th>jason</th>
                    <th>123</th>
                </tr>

                <tr class="danger">
                    <th>002</th>
                    <th>ja</th>
                    <th>555</th>
                </tr>

                <tr>
                    <th class="warning">003</th>
                    <th>on</th>
                    <th>999</th>
                </tr>

                </tbody>
            </table>

            <h2 class="text-center">用户注册</h2>
            <form action="">
                <p>姓名：
                    <input type="text" class="form-control">
                </p>
                <p>密码：
                    <input type="text" class="form-control">
                </p>
                <p>性别：
                    <input type="radio">男
                    <input type="radio">女
                </p>
                <p>
                    <input type="submit" class="btn btn-danger btn-block">
                </p>
            </form>
        </div>
    </div>
</div>
</body>
</html>

请添加图片描述
在这里插入图片描述

按钮组

# 可作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

<a href="" class="btn btn-primary">点这里</a>
<a href="" class="btn btn-block btn-danger">重置</a>

图标

class="glyphicon glyphicon-heart"

# bootstrap自带的
	通过span标签修改class属性值

# fontawesome网站
	专门提供图标库  # 完美兼容bootstrap框架
	https://fontawesome.dashgame.com/

请添加图片描述

其余详细描述详见官网文档：
https://v3.bootcss.com/