Bootstrap:修订间差异

无编辑摘要
无编辑摘要
 
(未显示同一用户的5个中间版本)
第6行: 第6行:
*2012年1月31日,Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件,并且对许多组件进行了修改。
*2012年1月31日,Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件,并且对许多组件进行了修改。
*2013年8月19日,Bootstrap 3发布。
*2013年8月19日,Bootstrap 3发布。
*2020年6月,Bootstrap 5 alpha发布。移除了[[JQuery]]依赖。


{{了解更多
{{了解更多
|[https://blog.getbootstrap.com/ Bootstrap 博客]
|[https://blog.getbootstrap.com/ Bootstrap 博客]
}}
}}
===安装===




==快速入门==
===第一个示例===
创建一个<code>index.html</code>文件,通过CDN导入boostrap的JavaScript和CSS文件,如下:
<syntaxhighlight lang="html" >
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>
</syntaxhighlight>
{{了解更多
|[https://getbootstrap.com/docs/5.3/getting-started/introduction/ Bootstrap 文档:介绍 ]
}}
=== 文件内容 ===
{| class="wikitable"
! 名称
! 描述
|-
| bootstrap.css<br />bootstrap.js  <br /><br />bootstrap.min.css<br />bootstrap.min.js
| 常用的编译版本,min为压缩删除不必要空格的版本,部署时使用。
|-
| bootstrap.css<br />bootstrap.bundle.js<br /><br />bootstrap.min.css<br />bootstrap.bundle.min.js
| bundle的js包含 Popper.js和bootstrap.js,提供下拉列表、弹出框或工具提示。
|}
{{了解更多
|[https://getbootstrap.com/docs/5.3/getting-started/contents/  Bootstrap 文档:内容]
|[https://getbootstrap.com/docs/5.3/getting-started/introduction/ Bootstrap 文档:介绍 ]
}}
==布局==
==布局==
===基础===
====断点====
Bootstrap 包括 6 个默认断点(breakpoints),用于响应式构建。断点也可以自定义宽度。
{| class="wikitable"
|-
! Breakpoint !! CSS类!! 尺寸!! 示例
|-
| Extra small || None || <576px  || <code>.col-6</code>
|-
| Small || sm || ≥576px  || <code>.col-sm-4</code>  <br /><code>.container-sm</code>
|-
| Medium || md || ≥768px|| <code>.col-md-4</code>
|-
| Large || lg || ≥992px|| <code></code>
|-
| Extra large || xl || ≥1200px||
|-
| Extra extra large || xxl || ≥1400px||
|-
| Example || ex || ≥1600px||
|}
{{了解更多
|[https://getbootstrap.com/docs/5.3/layout/breakpoints/ Bootstrap 文档:Breakpoints]
}}


==主件==
====容器====
容器(containers),是Bootstrap基本构建块,使用默认的响应式网格(grid)必须位于容器里。
<syntaxhighlight lang="HTML" >
<div class="container">
  <!-- Content here -->
</div>
</syntaxhighlight>
{{了解更多
|[https://getbootstrap.com/docs/5.3/layout/containers/ Bootstrap 文档:Containers ]
}}
 
===响应式网格===
响应式网格(Grid system)
 
<syntaxhighlight lang="HTML" >
<div class="container text-center">
    <div class="row">
        <div class="col-3 text-bg-success ">
            1 (占3列)
        </div>
        <div class="col-6 text-bg-primary">
            2 (占6列)
        </div>
        <div class="col-3 text-bg-danger ">
            3 (占3列)
        </div>
    </div>
</div> 
</syntaxhighlight>
{{了解更多
|[https://getbootstrap.com/docs/5.3/layout/grid/ Bootstrap 文档:Grid system]
}}
 
==组件==




第187行: 第284行:
|https://bootstrapmade.com/
|https://bootstrapmade.com/
|}
|}
===后台模板===
===常见模板===
{| class="wikitable"  style="width: 100%;
{| class="wikitable"  style="width: 100%;
! 名称
! 名称
! 版本
! 描述
! 描述
! 网址
! 网址
|-
| [[AdminLTE]]
| 开源模板,v4.0 基于 Bootstrap 5,不依赖[[JQuery]]。
| 官网:https://adminlte.io<br \>源代码:https://github.com/ColorlibHQ/AdminLTE
|-
|-
| AdminKit  
| AdminKit  
| Bootstrap 5
| 开源模板,v2.0 基于 Bootstrap 5,不依赖[[JQuery]]。
| 开源模板,不需要jQuery
| 官网:https://adminkit.io/<br \>源代码:https://github.com/adminkit/adminkit
| 官网:https://adminkit.io/<br \>源代码:https://github.com/adminkit/adminkit
|-
|SB Admin 2
| 开源模板,基于Bootstrap 4。
|官网:https://startbootstrap.com/theme/sb-admin-2 <br />源代码:https://github.com/startbootstrap/startbootstrap-sb-admin-2
|-
|PlainAdmin
| 开源模板,基于Bootstrap 5,不依赖[[JQuery]]。
|官网:https://plainadmin.com/ <br />源代码:https://github.com/PlainAdmin/plain-free-bootstrap-admin-template
|-
|Volt Bootstrap
|开源模板,基于Bootstrap 5,不依赖[[JQuery]]。
|官网:https://demo.themesberg.com/volt/pages/dashboard/dashboard.html <br />源代码:https://github.com/themesberg/volt-bootstrap-5-dashboard
|}
|}



2023年11月18日 (六) 06:55的最新版本

Bootstrap是一个用于网站和网络应用程序开发的开源前端框架。包括HTMLCSSJavaScript的框架,提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展,旨在使动态网页和Web应用的开发更加容易。

简介

时间轴

  • 2011年8月19日,将其作为开源项目发布。
  • 2012年1月31日,Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件,并且对许多组件进行了修改。
  • 2013年8月19日,Bootstrap 3发布。
  • 2020年6月,Bootstrap 5 alpha发布。移除了JQuery依赖。

了解更多 >> Bootstrap 博客


安装

快速入门

第一个示例

创建一个index.html文件,通过CDN导入boostrap的JavaScript和CSS文件,如下:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

了解更多 >> Bootstrap 文档:介绍


文件内容

名称 描述
bootstrap.css
bootstrap.js

bootstrap.min.css
bootstrap.min.js
常用的编译版本,min为压缩删除不必要空格的版本,部署时使用。
bootstrap.css
bootstrap.bundle.js

bootstrap.min.css
bootstrap.bundle.min.js
bundle的js包含 Popper.js和bootstrap.js,提供下拉列表、弹出框或工具提示。

了解更多 >> Bootstrap 文档:内容 Bootstrap 文档:介绍


布局

基础

断点

Bootstrap 包括 6 个默认断点(breakpoints),用于响应式构建。断点也可以自定义宽度。

Breakpoint CSS类 尺寸 示例
Extra small None <576px .col-6
Small sm ≥576px .col-sm-4
.container-sm
Medium md ≥768px .col-md-4
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px
Example ex ≥1600px

了解更多 >> Bootstrap 文档:Breakpoints


容器

容器(containers),是Bootstrap基本构建块,使用默认的响应式网格(grid)必须位于容器里。

<div class="container">
  <!-- Content here -->
</div>

了解更多 >> Bootstrap 文档:Containers


响应式网格

响应式网格(Grid system)

<div class="container text-center">
    <div class="row">
        <div class="col-3 text-bg-success ">
            1 (占3列)
        </div>
        <div class="col-6 text-bg-primary">
            2 (占6列)
        </div>
        <div class="col-3 text-bg-danger ">
            3 (占3列)
        </div>
    </div>
</div>

了解更多 >> Bootstrap 文档:Grid system


组件

通用类

概览

类别 描述 示例
背景
Background
背景颜色,bg-*,其中*可取值:{ primary, secondary, success, danger, warning, info, light, dark, body, white, transparent }

背景梯度,bg-gradient
<div class="bg-danger text-white">文本本文</div>背景设置danger颜色,文本设置白色
颜色
Colors
text-*,其中*可取值:{ primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black, white }
边框
Borders
增加边框,四边border,上边border-top,下边border-bottom,开始border-start,结束border-end

减少边框,四边border-0,上边border-top-0,下边border-bottom-0,开始border-start-0,结束border-end-0

边框颜色,border-*,其中*可取值主题颜色:{ primary, secondary, ... }。

边框宽度,border-*,其中*可取值{1, 2, 3, 4, 5}。

边框圆角半径,roundedrounded-*,其中*可取值{top, bottom, start, end, circle, pill}。

圆角尺寸,rounded-*,其中*可取值{0, 1, 2, 3}
<span class="border border-success"></span> 添加一个success颜色边框
显示方式
Display
切换组件是否显示,其原理通过修改display属性。

d-*d-?-*其中*可取显示方式值{none 不显示, inline 行内显示, inline-block, block 块显示, grid, table, table-cell, table-row, flex, inline-flex},其中?可取视窗大小{sm,md,lg,xl,xxl}。

d-print-*打印显示方式,其中*可取显示方式值,与d-*一样。
<div class="d-block">内容</div>任何视窗大小都显示
<div class="d-md-block">内容</div>在md屏幕及更大显示
<div class="d-none">内容</div>任何视窗大小都隐藏
<div class="d-md-none">内容</div>在md屏幕及更大隐藏
<div class="d-md-none d-lg-block">内容</div>只在md屏幕下隐藏
<div class="d-none d-sm-block d-md-none">内容</div>只在sm屏幕下显示
<div class="d-inline">内容</div>div行内显示
弹性盒子
Flex
创建弹性盒子(flexbox),块弹性盒子d-flexd-*-flex,行内弹性盒子d-inline-flexd-*-inline-flex,其中*可取值断点{sm,md,lg,xl,xxl}。只有创建弹性盒子后,才能设置下面的属性值。

方向,水平正向flex-rowflex-*-row,水平反向flex-row-reverseflex-*-row-reverse,垂直正向flex-columnflex-*-column,垂直反向flex-column-reverseflex-*-column-reverse,其中*可取值断点{sm,md,lg,xl,xxl}。

调整主轴(main axis)对齐方式,主轴即当前盒子方向,如盒子横向flex-row主轴就是横向。justify-content-?justify-content-*-?其中?可取值{start(都靠左边,默认值), end(都靠右边), center(都居中),其中*取值{sm,md,lg,xl,xxl}, between(平均,最左+中间+最右), around(平均,每个子节点左右空隙一样), evenly(平均,子节点空隙一样)}

调整交叉轴(cross axis)对齐方式,交叉轴是与主轴垂直的轴,如盒子横向flex-row交叉轴是纵向。align-items-?align-items-*-?其中?取值{start, end, center, baseline, or stretch(默认)},其中*同上。

调整子节点交叉轴对齐方式,单独调整需在某个子节点添加属性align-self-?align-self-*-?,其中*和?取值同上,如align-self-center,align-self-sm-baseline。

填充,多个子节点添加flex-fillflex-*-fill

伸展和收缩,子节点添加flex-grow-1flex-*-grow-1表示在在其他子节点够用情况下尽量伸展空间。子节点添加flex-shrink-1flex-*-shrink-1表示该节点尽可能收缩以留空间给其他子节点。 其中*取断点值。

自动边距, 子节点添加me-auto属性表示其后面节点都推到最右,子节点添加ms-auto属性表示其前面节点都推到最左。me是margin end缩写。

搭配align-items将一个flex子节点移动到容器的顶部或底部,flexbox添加d-flex align-items-start flex-column属性,其中第一个子节点添加mb-auto属性。

换行,完全不换行flex-nowrap(浏览器默认),换行flex-wrap,反向换行flex-wrap-reverse,也可以添加响应变量如flex-sm-wrap。

排序,子节点设置order-*改变显示顺序,其中*取值{1,2,3,4,5}。也可以添加响应变量如order-sm-2。

对齐内容,align-content-* flex-wrap,其中*可取值{start(浏览器预设),end,center,between,around,stretch},注意单行没效果。

媒体对象组件,见文档。
浮动
Float
互动
Interactions
溢出
Overflow
位置
Position
阴影
Shadows
尺寸
Sizing
间距
Spacing
文本
Text
对齐,左对齐text-start text-*-start, 居中对齐text-center text-*-center, 右对齐text-end text-*-end。其中*可取值:{ sm, md, lg, xl },表示在该视窗或更大下开始对齐。

换行和溢出,text-wraptext-nowrap

文字断行,
<p class="text-center">文本本文</p> 该文本任何视窗大小都居中显示
<p class="text-md-center">文本本文</p> 该文本在md视窗或更大居中显示,而在sm视窗会按原来方式显示。
垂直对齐
Vertical align
可视性
Visibility

通用类API

图标 Icon

概览

Bootstrap 默认不包含图标集,可以使用Bootstrap维护的图标集Bootstrap Icons,或其他任何图标集。下表为一些图标集:

名称 描述 网址
Bootstrap Icons @mdo设计并由Bootstrap 团队维护。使用MIT许可,可免费用于个人或商业项目。 https://icons.getbootstrap.com/
Font Awesome https://fontawesome.com/
Feather https://feathericons.com/
Octicons https://primer.style/octicons/
Google Material Icons https://fonts.google.com/icons

了解更多 >> Bootstrap 文档:Icons


Bootstrap Icons

安装

Bootstrap Icons有三种安装方式:

安装方式 描述 操作
npm npm i bootstrap-icons
下载 Bootstrap Icons 发布在 GitHub 上,包括图标 SVG、字体、许可证和自述文件。 https://github.com/twbs/icons/releases/latest/
CDN 使用jsdelivr CDN示例:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

了解更多 >> Bootstrap Icons:安装


使用

用法 描述 示例
嵌入式 不需要安装任何文件,只需要在Bootstrap Icons网页查找图标,点进去后复制其HTML代码。
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
CSS 下载 Bootstrap Icons,将bootstrap-icons.cssfonts放入项目,并在HTML页面引入 <link rel="stylesheet" href="/assets/css/bootstrap.min.css"> <i class="bi bi-emoji-smile"></i> 显示

了解更多 >> Bootstrap Icons:使用


模板

模板商城

名称 描述 网址
Bootstrap Themes Bootstrap 官方商城。 https://themes.getbootstrap.com/
Start Bootstrap 有开源免费和收费的模板。 https://startbootstrap.com/
BootstrapMade 有免费和收费模板。 https://bootstrapmade.com/

常见模板

名称 描述 网址
AdminLTE 开源模板,v4.0 基于 Bootstrap 5,不依赖JQuery 官网:https://adminlte.io
源代码:https://github.com/ColorlibHQ/AdminLTE
AdminKit 开源模板,v2.0 基于 Bootstrap 5,不依赖JQuery 官网:https://adminkit.io/
源代码:https://github.com/adminkit/adminkit
SB Admin 2 开源模板,基于Bootstrap 4。 官网:https://startbootstrap.com/theme/sb-admin-2
源代码:https://github.com/startbootstrap/startbootstrap-sb-admin-2
PlainAdmin 开源模板,基于Bootstrap 5,不依赖JQuery 官网:https://plainadmin.com/
源代码:https://github.com/PlainAdmin/plain-free-bootstrap-admin-template
Volt Bootstrap 开源模板,基于Bootstrap 5,不依赖JQuery 官网:https://demo.themesberg.com/volt/pages/dashboard/dashboard.html
源代码:https://github.com/themesberg/volt-bootstrap-5-dashboard

资源

官网

网站

文章