Bootstrap_bootstrap.min.js3.3.7下载安装-CSDN博客

本文链接：https://blog.csdn.net/m0_74071065/article/details/129401522

以bootstrap3为样本

A-1 BootStrap简介

A-1-1 BootStrap介绍

官网：Bootstrap·The most popular HTML, CSS, and JS library in the world.
中文网：Bootstrap中文网
BootStrap是一套现成的CSS样式集合
BootStrap是最受欢迎的HTML,CSS和JS框架，用于来发响应式布局，移动设备优先的web项目
BootStrap建设的网站：界面清晰，简洁；要素排版利落大方
BootStrap特别适合那种没有设计师团队（甚至没有前端的团队）。可以快速的做出一个网页

A-1-2 BootStrap特点

简洁，直观，强悍的前端开发框架，HTML，css,js工具集，让web 开发更速，简单
基于HTML5,CSS3的BootStrap，具有大量的又热特性：友好的学习曲线，卓越的兼容性。响应式设计，12列格网，样式向导文档
自定义JQUERY插件，完整的类库，BootStrap3基于Less，BootStrap4基于Sass的css预处理技术
BootStrap响应式布局设计，让一个网站可以兼容不同分辨路的设备。BootStrap响应式布局设计，给用户提供更好的视觉使用体验
5）丰富的组件

A-1-3 下载与使用

下载：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网
下载完成后
拷贝dis/css中的BootStrap.min.css到项目css中
拷贝dis/js中的BootStrap.min.js到项目js中
下载 jQuery.js

A-2 Bootstrap的安装

方式一：直接映入文件（用CDN的地址）
css:“https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css”
如果只想看样式，那么就直接引入css即可
js:“https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jqery.slim.min.js”
“https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js”

css在上部引入，js在尾部引入

方式二：模块化的包管理的方式
npm install bootstrap
暂时不讲

A-3 Bootstrap的使用

使用的有如下几类：

布局（格栅系统）
表格
表单
组件
JavaScript插件

A-3-1 布局（栅格系统）

Bootstrap需要为页面内容和格栅系统包裹一个.container容器。框架中提供了两类：

.container类：用于固定宽度并支持响应式布局的容器

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

.container-fluid类：用于宽度为100%，占据全部视口（viewport）的容器。

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

注意：由于padding等属性的原因，着两种容器不能互相嵌套

栅格系统
Bootstrap提供了一套响应式、移动设备有限的流式栅格系统，随着屏幕或者视口（viewport）的尺寸增加，系统会自动分为最多12列（12份）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style>
        .box{
            width: 1500px;
            font-size: 12px;
            line-height: 50px;
        }
        .row>div{
            border:1px solid red;
            height:50px;
            text-align: center;
            line-height:50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
        </div>
        <div class="row">
            <div class="col-md-8"> <!-- 这个里面的8指的是在这一行占8/12 -->
                8
            </div>
            <div class="col-md-4"> <!-- 这个里面的4指的是它占这一行的4/12 -->
                4
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
固定宽度。
也可以适应不同设备上的屏幕：

1.列组合
列组合就是更改数字来合并列（列总数不能超过12，大于12，自动换到下一行），有点类似于表格的colspan属性

2.列偏移
有时候，我们不希望相邻的两个列紧靠在一起，让它们之间存在间隙，这就可以用列偏移（offset）来实现。使用列偏移只需在列元素上添加类名.col-md-offset-*(星号代表要偏移的列组合数)，同时应该注意偏移的总数不能超过12

A-4 表格

基础表格
在Bootstrap里，给标签<table>添加.table类可以为其赋予基本的样式：少量的内部（padding）和水平方向的分割线
在这里插入图片描述
条纹状表格
通过.table-striped类可以给body内的每一行增加斑马条纹样式

快浏览器兼容性
条纹状表格时以来inth-childCSS选择器来实现的，二之一功能不被Internet Explorer 8 支持

代码：

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

带边框的表格
通过.table-bordered 类可以给表格和其中的每个单元格怎加边框
和上面那个条纹表格一样

当然，这两个表格是可以叠加在一起

鼠标悬停
通过添加.table-hover类可以让table中的每一行对鼠标悬停状态做出相应

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

当我们鼠标移动到哪一行，就会出现灰色背景。如果我们不想要灰色背景该怎么办呢？让我们进入css样式表，找到：.table-hover>tbody>tr:hover{background-color:#f5f5f5}然后复制到style内，将#f5f5f5改成想要的颜色即可。

以上三种特性可以叠加使用，具体参考网站内说明

A-4-1 状态类

通过这些状态类可以为行或者单元格设置颜色

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

示例自己看

A-5 表单

单独的表单控件会被自动赋予一些全局样式
所有设置了.form-control类的<input>、textarea和<select>元素都将被默认设置官渡属性为width:100%;将label元素和前面提到的空间包裹在.from-group中可以获得最好的排列
https://v3.bootcss.com/css/#forms

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
    <style>
        .container{
            width:500px;
            font-size: 12px;
            line-height: 50px;
            border:1px solid #dbdbdb;
            margin: 50px auto;
            border-radius: 10px;
        }
    </style>
<body>
    <div class="container">
    <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</body>
</html>