只因小黑子的 bootstrap框架快速入土过程

已于 2023-02-03 16:26:34 修改
阅读量381 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrap 前端 javascript
于 2023-02-03 03:46:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VanWot/article/details/128857803
版权

小黑子的bootstrap框架从入门到入土的过程

bootstrap框架教程

1. bootstrap的介绍

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单
用于开发响应式布局、移动设备优先的WEB项目

在这里插入图片描述

2. bootstrap的安装

在这里插入图片描述

在这里插入图片描述

3. boostrap的使用布局(栅格系统的初步体验)

在这里插入图片描述

3.1 布局（栅格系统）

Bootstrap提供了套响应式、 移动设备优先的流式栅格系统，
随着屏幕或视口(viewport) 尺寸的增加，系统会自动分为最多12列(12份）
在这里插入图片描述

  <link rel="stylesheet" href="E:\boostrap\bootstrap-5.1.3-dist\css\bootstrap.min.css">
  <style>
    .box{
      width: 1500px;
      font-size: 12px;
      line-height: 50px;
    }

    .row > div,.col-md-1{
      border: 1px solid red;
      height: 50px;
      text-align: center;
      line-height:50px ;
    }
  </style>
  <div class="container box">
    <div class="row">
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
      <dic class="col-md-1">1</dic>
    </div>
    <div class="row">
      <div class="col-md-8">8</div>
      <div class="col-md-4">4</div>
    </div>
    <div class="row">
      <div class="col-md-6">8</div>
      <div class="col-md-6">4</div>
    </div>
    <div class="row">
      <div class="col-md-4">4</div>
      <div class="col-md-4">4</div>
      <div class="col-md-4">4</div>
    </div>
  </div>

在这里插入图片描述

3.2 栅格系统的详细_固定宽度，百分比宽度，堆叠到水平

设定的只能适应一种屏幕大小
在这里插入图片描述

3.3 堆叠到水平，适应三种屏幕，多余的列换行

在这里插入图片描述

  <link rel="stylesheet" href="./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>
<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

在这里插入图片描述

在这里插入图片描述
3.
在这里插入图片描述

4. 表格

在这里插入图片描述
2.
在这里插入图片描述

  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container{
      font-size: 12px;
      line-height: 50px;
    }
  </style>
  <div class="container">
    <table class="table table-striped table-bordered">
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>12</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>12</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>12</td>
      </tr>
    </table>
  </div>

在这里插入图片描述
3.

在这里插入图片描述
4.
在这里插入图片描述

  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container{
      font-size: 12px;
      line-height: 50px;
    }

    .table-hover>tbody>tr:hover{
      background-color: pink;
    }
  </style>
  <div class="container">
    <table class="table table-striped table-bordered table-hover">
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>12</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>12</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>12</td>
      </tr>
    </table>
  </div>

在这里插入图片描述

5. 表单

在这里插入图片描述

  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container{
      width: 1000px;
      border-radius: 10px;
      border: 1px solid gray;
    }

  </style>
  <div class="container">
    <form>
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

在这里插入图片描述

6. 按钮

在这里插入图片描述
在这里插入图片描述

  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container {
      width: 1000px;
      border-radius: 10px;
      border: 1px solid gray;
    }
  </style>
  <div class="container">
    <form>
      <a class="btn btn-primary" href="#" role="button">Link</a>
      <button class="btn btn-primary" type="submit">Button</button>
      <input class="btn btn-primary" type="button" value="Input">
      <input class="btn btn-primary" type="submit" value="Submit">
      <input class="btn btn-primary" type="reset" value="Reset">
    </form>
  </div>

在这里插入图片描述

  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container {
      width: 1000px;
      border-radius: 10px;
      border: 1px solid gray;
    }
  </style>
  <div class="container">
    <form class="form-horizontal">
      
      <button class="btn btn-danger btn-lg active">危险</button>
      <button class="btn btn-warning btn-sm">警告</button>
      <button class="btn btn-success btn-xs" disabled>警告</button>
      
    </form>
  </div>

在这里插入图片描述

7. 组件_图标

在这里插入图片描述

  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container {
      width: 500px;
      border-radius: 10px;
      border: 1px solid gray;
      font-size: 12px;
      margin: 50px auto;
    }
  </style>
  <div class="container">
    <span class="glyphicon glyphicon-flash"></span>
    <input type="text" name="" id="">

    <button type="buttton" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
    </button>
    <button type="buttton" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
    </button>

    <button type="buttton" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-tree-conifer" aria-hidden="true"></span>Star
    </button>
    
    <div class="alert alert-danger" role="alert">
      <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
      <span class="sr-only">Error:</span>
      Enter a valid email address
    </div>
  </div>

在这里插入图片描述

8. 组件_下拉菜单

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

在这里插入图片描述

9. 组件_输入框组

  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container {
      width: 500px;
      border-radius: 10px;
      border: 1px solid gray;
      font-size: 12px;
      margin: 50px auto;
    }
  </style>
  <div class="container">
    <div class="input-group flex-nowrap">
      <span class="input-group-text" id="addon-wrapping">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
    </div>

    <div class="input-group mb-3">
      <span class="input-group-text">$</span>
      <span class="input-group-text">0.00</span>
      <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
    </div>
  </div>

在这里插入图片描述

10. 按钮组

  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container {
      width: 500px;
      border-radius: 10px;
      border: 1px solid gray;
      font-size: 12px;
      margin: 50px auto;
    }
  </style>
  <div class="container">
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group me-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-primary">3</button>
        <button type="button" class="btn btn-primary">4</button>
      </div>
      <div class="btn-group me-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">5</button>
        <button type="button" class="btn btn-secondary">6</button>
        <button type="button" class="btn btn-secondary">7</button>
      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-info">8</button>
      </div>
    </div>
  </div>

在这里插入图片描述

11. javasc插件_模态窗口

在这里插入图片描述

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

在这里插入图片描述

  <link rel="stylesheet" href="E:\boostrap\bootstrap-5.0.0-beta1-dist\css\bootstrap.min.css">
  <script src="E:\boostrap\bootstrap-5.0.0-beta1-dist\js\bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  打开模态框
</button>
<!-- 模态框 -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
 
      <!-- 模态框内容 -->
      <div class="modal-body">
        <form action="" class="form-horizontal" role="form">
          <div class="form-group">
            <label for="uname" class="col-md-2 control-label">姓名</label>
            <div class="col-md-8">
              <input type="text" id="uname" class="form-control" placeholder="请输入姓名">
            </div>
          </div>
        </form>
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
      </div>
 
    </div>
  </div>
</div>
  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>

在这里插入图片描述

小黑子史蒂夫
关注
专栏目录
小黑子——JS项目案例实战简单管理系统
VanWot的博客
02-06 492
JS项目案例实战简单管理系统
小黑子的HTML入土过程
VanWot的博客
10-19 2479
HTML入门教程
只因小黑子的HTML5和CSS3入土复习过程第一章
VanWot的博客
12-28 311
只因小黑子的HTML5+CSS3土过程第一章
VsCode Rainbow fart 蔡徐坤语音包使用教程（超详细）
weixin_63207652的博客
10-31 3080
操作流程前言一、效果展示：二、具体流程：1.安装插件2.下载kun包方法一方法二3.导入kun包4.使用说明三、制作教程：总结 前言 全民制作人们大家好！我是练习时长两年半的个人程序猿 最近看到Rainbow fart这个插件(就是一个在你敲代码的时候给予你语音鼓励的插件) 发现里面找不到我们kun哥的语音包，作为资深小黑子ikun实在受不了，然后就自己做了个语音包嘿嘿 一、效果展示： 链接：点鸡跳转 提取码：gxde 在线看一下，可能有点卡 二、具体流程： 1.安装插件 首先在拓展中搜索rainbow
2022-04-10 前端开发框架Bootstrap笔记(一) 介绍下载和引入以及示例
GAARA
04-10 388
文章目录 介绍 下载 如何学习: 引入文件 示例 结果 介绍 Bootstrap 是全球最受欢迎的前端框架， 用于构建响应式、移动设备优先的网站。 下载 bootstrap5.1.3 如何学习: 看文档 引入文件 bootstrap.css和bootstrap.bundle.js
快速开发框架C#源码完全开源版 基于ASP.NET MVC+EF6+Bootstrap框架等
04-20
1、一套基于ASP.NET MVC+EF6+Bootstrap开发出来的框架，源代码完全开源，可以帮助你解决C#以及.NET项目68%的重复工作，让开发人员远离加班。 2、使用ApacheLicense2.0协议，采用主流框架，容易上手，简单易学，学习...
Web前端基础：Bootstrap框架.pptx
05-06
【Bootstrap框架】是Web前端开发中的一个重要工具，它是由Twitter推出的开源框架，旨在提供一套简洁、灵活且响应式的UI（用户界面）组件和交互设计。Bootstrap基于HTML、CSS和JavaScript，能够快速构建出美观且适应...
30分钟快速掌握Bootstrap框架
11-25
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 ...
NFine快速开发框架C#源码完全开源版 基于ASP.NET MVC+EF6+Bootstrap框架等
04-15
NFine快速开发框架是一款以C#语言编写的，完全开源的软件开发框架，适用于ASP.NET MVC平台。这个框架集成了Entity Framework 6（EF6）作为数据访问层，利用Bootstrap进行前端界面设计，旨在提高开发效率，降低项目...
附录7-使用bootstrap组件
potato123232的博客
09-30 1077
我们简单用几个，在使用bootstrap的时候，一般我们会将css与js都引入进来。
bootstrap-5.1.3-dist.zip
11-11
bootstrap 发布版本 5.1.3
bootstrap 4.1.3-dist.zip
11-16
bootstrap-4.1.3-dist,非常好的资源，当官网下载不了时，这个是一个非常好的版本，可供下载。
最受欢迎的前端CSS框架 bootstrap-5.1.0
08-10
bootstrap-5.1.0-dist.zip
ASP.net 简单登录界面
热门推荐
m0_56227168的博客
02-09 1万+
一.说明 此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家. 这一篇要练习的是,如下课程的代码: 新建项目: 因为这里小白用到的是mysql,所以引用:MySql.Data.dll大家可去官网自行搜索下载,index.aspx,login.aspx,login_new.aspx,ToolMysqlDate.cs是新添加的,后面会展开里面的代码. bootstrap-5
bootstrap-3.3.7-dist.zip免费分享(永久有效)
白木乔
02-19 7150
链接：https://pan.baidu.com/s/1cwMcYkUsm5cDCxSXNUXkww 提取码：9r1b
bootstrap-dist的下载和使用bootstrap可视化布局代码无样式解决
NeiHan2020的博客
04-06 656
bootstrap-dist目前我自己用到的范围也就是bootstrap可视化布局后复制生成好的HTML，然后引用链接，也就这么多 1.下载 官网地址点我 博主下载好的文件点我（官网下载的）提取码:2021 2.使用 目前本人知道的bootstrap的用途也仅限于在HTML可视化布局工具生成的HTML代码中添加bootstrap相关资源的连接，从而实现样式或功能如: ...
bootstrap作业
weixin_52765407的博客
03-13 585
bootstrap笔记 v5-导航栏------作业一 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot
使用bootstrap5.1.3所踩的坑（carousel，modal）
qq_43482325的博客
01-16 1153
一、插件版本 bootstrap：5.1.3 jquery: 3.6.0 二、carousel，modal新旧对比 carousel和modal都存在这样的问题，下面只举carousel的例子。 旧版 bootstrap3.x.x都能行 <div id="slider" class="carousel slide" data-ride="carousel"> <div class="carousel-indicators"> <button type="button
【Vue】a-radio-group单选框数字与字符串回显问题
最新发布
叶为正的博客
10-08 284
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值