BootStrap

程序员浩浩

于 2023-03-11 09:39:48 发布

阅读量402

点赞数 1

文章标签： bootstrap javascript 前端 html css

本文链接：https://blog.csdn.net/weixin_52655964/article/details/129459241

版权

Bootstrap是一个流行的响应式前端框架，用于开发移动优先的Web项目。本文介绍了如何下载和使用Bootstrapv3，包括引入CSS和JS资源，以及使用栅格系统、模态框和工具提示等组件。同时，提到了Bootstrap的响应式设计和对不同屏幕尺寸的支持。

摘要由CSDN通过智能技术生成

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

由推特公司最早推出的UI框架，是UI框架的鼻祖。现在公司使用不多，但是我们要学习的BootStrap的思想。

下载

我们使用的是V3版本，现在已经到V5版本。

因为网络的问题，我们可以使用我下载好的。

bootstrap-3.4.1-dist.zip

使用

解压对应的压缩包，解压后得到三个文件夹

如果我们的项目中想要使用BootStrap可以直接把这三个文件夹复制到我们的项目目录中。然后新建一个网页文件

打开网页，引入相关资源。

<!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="./css/bootstrap.min.css">
</head>
<body>
  

  <!-- 下面这些代码，如果不适用js可以不引入 -->
  <!-- 因为bootstrap中的js代码是基于jQuery，所以需要在前面引入jQuery -->
  <script src="./js/jquery.js"></script>
  <!-- 如果我们需要使用到相关JS效果，还需要引入JS -->
  <script src="./js/bootstrap.js"></script>
</body>
</html>

可以点击下面链接下载jQuery

📎jquery.js

资源引入完成后，去官方文档中，找到我们想要使用的组件，然后复制代码到我们的html中，然后显示到页面上即可。

全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网

组件 · Bootstrap v3 中文文档 | Bootstrap 中文网

JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网

资源介绍

CSS资源

核心的样式是bootstrap.css和bootstrap.min.css，这两个css是一样的东西，后者是压缩后的样式。

bootstrap.min.css.map可以告知我们对应的样式出现在第几行

bootstrap.theme.*这些文件是bootstrap为了满足喜欢boostrap2的用户提供的主题样式。一般不用。

font资源

bootstrap中内置了字体图标。如果我们想要使用，font文件夹一定放在项目里。

js资源

引入js可以使用对应的相关的BoostrapJS插件。

栅格系统

基本上所有的UI框架中都有栅格系统，栅格系统的意思就是将父元素分成对应的份数（bootstrap是12份，现在主流的是24份）

栅格系统是已容器中包裹row元素生成的

<div class="container">
  <div class="row">
    /* 这个row就会被分成12份 */
  </div>
</div>

我们可以在对应的位置上通过定义不同的数字，来让我们元素站不同份数

<div class="container">
  <div class="row">
    /* 这个row就会被分成12份 */
    <div class="col-xx-数字"></div>
  </div>
</div>

xx可以是xs\sm\md\lg，这几个取值分别代表了浏览器在不同宽度下元素的样式。

xs 在全分辨率下都生效
sm 在>=768px的分辨率生效
md 在>=992px的分辨率生效
lg 在>=1200px的分辨率生效

为什么要这样设置？如果在多个相邻的分辨率下表现效果一致，我们只需要写小的即可。

col-md-4 col-lg-4 就可以只写 col-md-4

栅格系统支持嵌套

<div class="container">
  <div class="row">
    <div class="col-xs-8">
      8
      <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">2</div>
        <div class="col-xs-1">3</div>
        <div class="col-xs-1">4</div>
        <div class="col-xs-1">5</div>
        <div class="col-xs-1">6</div>
        <div class="col-xs-1">7</div>
        <div class="col-xs-1">8</div>
        <div class="col-xs-1">9</div>
        <div class="col-xs-1">10</div>
        <div class="col-xs-1">11</div>
        <div class="col-xs-1">12</div>

      </div>
    </div>
    <div class="col-xs-4">4</div>
  </div>
</div>

在一个col中，再继续写对应的row即可实现栅格系统的嵌套。

响应式工具

组件介绍

字体图标

BootStrap中内置了一个收费的字体图标Glyphicons。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。

这些字体图标库是早期使用字体图标的方式，他们提供好很多的字体图标，然后我们引入，有一个弊端：会引入我们不需要的字体图标，所以建议使用阿里巴巴字体图标库。

出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

<span class="glyphicon glyphicon-th-list"></span>

模态框

想要使用需要引入JS，模态框单独的结构

<div class="modal fade" id="aaa" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" ><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        这里的内容会显示在模态框的中间区域
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

模态框上有个id，这个id需要绑定到让模态框出现的元素上的data-target。打开模态框的元素上必须添加固定属性data-toggle="modal"

<a href="#" data-toggle="modal" data-target="#aaa">打开模态框</a>

想要关闭模态框，需要给关闭模态框的元素上添加data-dismiss属性，值为modal

<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>

工具提示

想要使用工具提示，我们就得去复制一段js代码。

把下的代码放在一个script标签，这个标签需要放在所有script标签的最下面

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

title属性是提示的内容

data-toggle="tooltip"这个是必须要添加的

data-placement="" 控制提示方向的 top right bottom left

注意，data-toggle的作用只是为了在js中方便我们选择，我们可以换用其它操作选择到我们对应的元素。如果不屑这个属性可以使用其他操作。比如类名或者其他属性

例如：

<button type="button" class="btn btn-default tool" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default tool" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default tool" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default tool" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

js中就要进行对应的修改

$(function () {
  $('.tool').tooltip()
})

程序员浩浩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫