BootStrap

最新推荐文章于 2022-12-05 11:40:29 发布
最新推荐文章于 2022-12-05 11:40:29 发布
阅读量90 收藏
点赞数
分类专栏： 前端基础 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45662838/article/details/119829742
版权

BootStrap

1.概念：

​ 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

2.什么是框架？

​ 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。

​ 好处：

  1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。

  2. 响应式布局。
    * 同一套页面可以兼容不同分辨率的设备。

中文帮助文档

传送门

2.快速入门

  1. 下载Bootstrap
  2. 在项目中将这三个文件夹复制
  3. 创建html页面，引入必要的资源文件
  4. 模板
<!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个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Hello</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

3.响应式布局

  1. 同一套页面可以兼容不同分辨率的设备。 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

  2. 步骤：

    1)定义容器。相当于之前的table、容器分类：container：两边留白;container-fluid：每一种设备都是100%宽度。
    2)定义行。相当于之前的tr 样式：row。
    3)定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目。

    4）设备代号：
    1. xs：超小屏幕 手机 (<768px)：col-xs-12
    2. sm：小屏幕 平板 (≥768px)
    3. md：中等屏幕 桌面显示器 (≥992px)
    4. lg：大屏幕 大桌面显示器 (≥1200px)

    5）注意：

    1. 一行中如果格子数目超过12，则超出部分自动换行。
      1. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
      2. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
<!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个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Hello</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="js/jquery-3.2.1.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>

  <style>
    .inner{
      border: 1px solid rosybrown;
    }
  </style>
</head>

<body>
<!--1.定义一个容器-->
<!-容器分类：
			1. container：两边留白
			2. container-fluid：每一种设备都是100%宽度
--->
<div class="container-fluid">
<!--2.定义行-->
  <div class="row">
<!--定义元素-->
    <!--3.定义元素
           在大显示器一行全部格子
           在pad上一行一半格子
       -->
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
    <div class="col-lg-1  col-sm-1-2 inner">栅格</div>
  </div>
</div>

</body>
</html>

效果：

container：两边留白

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b4llq3mF-1629456218251)(BootStrap.assets/image-20210820164721529.png)]

4.CSS样式和JS插件

1.全局CSS样式：

  • 按钮：class=“btn btn-default”

    <a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

在这里插入图片描述

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

在这里插入图片描述

  • 响应式图片：

    • class=“img-responsive”：图片在任意尺寸都占100%

    • 图片形状

      • <img src="..." alt="..." class="img-rounded">方形
<img src="..." alt="..." class="img-circle">圆形
<img src="..." alt="..." class="img-thumbnail">相框式

在这里插入图片描述

  • 表格

    • table
    • table-bordered
    • table-hover

  • 表单

    • 给表单项添加：class=“form-control”

2.组件：

导航条

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

分页条

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

3.插件

轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
on-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
hello蜗牛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap使用
m0_57774967的博客
04-24 5134
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
Bootstrap简介
归兮的博客
08-18 8395
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
bootstrap的安装
12-05 1743
再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 5139
效果预览 我们先来看一下效果 可以看到这款插件的功能很强大，涵盖了十年视图，年视图，月视图，甚至小时视图，分钟视图都有，几乎能够满足大部分人的需要。不仅如此，还有完善的中文文档，方便我们个性化设置噢，我们一起去看看吧！ datetimepicker 官方文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 插件下载地址： https://github.com/smalot/bootstrap-datetimepicker/archiv
bootstrap网页作业
m0_62221227的博客
04-19 5028
bootstrap网页作业
Bootstrap
CJW的博客
07-28 8155
Bootstrap Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript，它简洁灵活，使得 Web 开发更加快捷。 基本结构 Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 行内包含列，每行最多12列。 Bootstrap 网格的基本结构： <div clas
Bootstrap educoder
qq_46675545的博客
06-12 3671
Bootstrap Bootstrap入门
Bootstrap基础知识
li_peng_yuan的博客
11-14 5128
1 、什么是 Bootstrap? Bootstrap 的作用是什么? ​ Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架. ​ 该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效) ​ 开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现. ​ 作用: Bootstrap 使得 Web 开发更加快捷、 高效. Bootstrap 支持响应式开发, 解决了移动
Bootstrap 颜色
书香水墨
07-25 4603
一、Bootstrap 颜色 1.1 基本颜色 Bootstrap4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light: <di...
Bootstrap自适应
weixin_44112242的博客
04-04 8994
Bootstrap是基于HTML.css.javaScript开发的简洁,直观,强悍的前端开发框架,使web开发跟家快捷 能制作响应式网页. bootstrap自适应: Bootstrap根据屏幕大小吧设备分为超小屏幕,小屏幕,中等屏幕,大屏幕四种并把屏幕分为12列 对应屏幕宽度为: 超小屏幕(手机):0-768px 对应设置 class=col-xs-number 小屏幕(平板):768-...
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
bootstrap4实现购物商城
06-18
Bootstrap 4 是一款流行的前端开发框架，用于快速构建响应式和移动优先的网站。在"bootstrap4实现购物商城"这个项目中，我们将会探讨如何利用Bootstrap 4的强大功能来创建一个功能完备、视觉吸引人的在线购物平台。 ...
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
torchaudio-0.13.1+cpu-cp39-cp39-win_amd64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
出入库存盘点表-图表分析-分类查询-Excel模板
07-17
【作品名称】：出入库存盘点表-图表分析-分类查询-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
torchaudio-0.12.1+cpu-cp37-cp37m-win_amd64.whl
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
bootstrap
06-01
, int size) { this.name = name; this.color = color; this.size = size; } public String getName() { return name;...Bootstrap最初由Twitter的前端工程师开发，现已成为最流行的前端框架之一。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hello蜗牛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值