BootStrap

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量104 收藏
点赞数
分类专栏： none 文章标签： bootstrap javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanqiu12138/article/details/128875898
版权

BootStrap

在这里插入图片描述

<div class="row">
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                <div class="card" style="width: 18rem;">
                    <img src="..." class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>

            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                <div class="card" style="width: 18rem;">
                    <img src="..." class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                <div class="card" style="width: 18rem;">
                    <img src="..." class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                <div class="card" style="width: 18rem;">
                    <img src="..." class="card-img-top aaa" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>

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 栅格系统的详细_固定宽度，百分比宽度，堆叠到水平

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

  <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>

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;
    }
  </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>

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>

在这里插入图片描述

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>

在这里插入图片描述

yanqiu12138
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap-4.6.2
06-13
bootstrap4下载
Bootstrap入门
weixin_67614925的博客
06-01 319
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。官网下载链接：下载 Bootstrap Popper文件下载地址（打开直接另存为即可）：Popper文件保存页注意：下载最新版本的小伙伴可以免去引用jQuery的步骤，建议引用popper文件，引用顺序也需要注意！！！！ 应用举例 grid格栅布局： 按钮： 按钮组： 上面简单举例，具体使用方法请参考： Bootstrap中文
nuxtjs3 引入bootstrap5
菜鸟的学习笔记
12-24 1698
如何在nuxtjs3中使用bootstrap
Bootstrap基本模板
weixin_44197120的博客
01-27 595
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个met
Bootstrap使用
m0_57774967的博客
04-24 5058
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
Bootstrap简介
归兮的博客
08-18 5843
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
bootstrap的安装
12-05 1651
再vue中用npm安装1)、使用指令 2)、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容: 至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多3)、使用指令:4)、在main.js文件中添加:
bootstrap datetimepicker
lishuaigell的博客
05-17 4870
效果预览 我们先来看一下效果 可以看到这款插件的功能很强大，涵盖了十年视图，年视图，月视图，甚至小时视图，分钟视图都有，几乎能够满足大部分人的需要。不仅如此，还有完善的中文文档，方便我们个性化设置噢，我们一起去看看吧！ datetimepicker 官方文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 插件下载地址： https://github.com/smalot/bootstrap-datetimepicker/archiv
bootstrap网页作业
m0_62221227的博客
04-19 4693
bootstrap网页作业
Bootstrap educoder
qq_46675545的博客
06-12 3168
Bootstrap Bootstrap入门
bootstrap
11-20
bootstrap
Bootstrap视频网站模板
05-28
Bootstrap视频网站模板
bootstrap.css
01-27
bootstrap的css文件
Bootstrap期末作品
12-18
整体运用了栅格系统布局，局部应用了固定到顶部的导航栏组件，下拉菜单组件，轮播图插件，以及Bootstrap自带的按钮样式。希望通过学习Bootstrap从这种布局的思想，实现的方式中加深对CSS html 的理解
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 371
注释很详细，直接上代码……
bpmn-js推荐几款常用的插件
飞云先生
04-30 157
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
遍历JavaScript对象（字典）
weixin_45596561的博客
05-01 352
遍历JavaScript对象（字典）是编程中常见的需求。for...in循环提供了最直接的方式，但在某些情况下可能需要额外的检查。与forEach结合使用提供了另一种遍历方式，特别是在您使用现代JavaScript版本时。根据您的具体需求和偏好，可以选择最适合您的遍历方法。
表格隔行变色
weixin_54339833的博客
05-02 410
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值