logo
LiuKuiBlog
banner
NEWS LETTER

Bootstrap

Scroll down

Bootstrap

1.Bootstrap安装与简介

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

官网:https://v3.bootcss.com/

下载:https://v3.bootcss.com/getting-started/#download

模板html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

2.布局容器和栅格网格系统

2.1布局容器

  1. .container类用于固定宽度并支持响应式布局的容器
1
2
<div class="container" >
</div>
  1. .container-fluid类用于100%宽度，占据全部视窗（viewport）的容器
1
2
<div class=".container-fluid" >
</div>

2.2栅格网格系统

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C开始是堆叠在一起的，当大于这些阈值时将变为水平排列C 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C开始是堆叠在一起的，当大于这些阈值时将变为水平排列C 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12 12 12 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px） 30px （每列左右均有 15px） 30px （每列左右均有 15px） 30px （每列左右均有 15px）
可嵌套 是 是 是 是
偏移(Offsets） 是 是 是 是
列排序 是 是 是 是 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

注意：如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

2.3响应式列重置

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。

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

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

除了列在分界点清除响应， 您可能需要 重置偏移、后推或前拉某个列。请看此 栅格实例。

1
2
3
4
5
6
7
8
9
<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

3.列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

1
2
3
4
5
6
7
8
9
10
11
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

4.嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

5.列排序

列排序就是改变列的方向，通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序，*代表移动的列组合数，类似于左右浮动，pull往前，push往后。

1
2
3
4
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

6样式

6.1排版

标题：

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

1
2
3
4
5
6
7
8
9
10
11
12

h1. Bootstrap heading															Semibold 36px

h2. Bootstrap heading															Semibold 30px

h3. Bootstrap heading															Semibold 24px

h4. Bootstrap heading															Semibold 18px

h5. Bootstrap heading															Semibold 14px

h6. Bootstrap heading															Semibold 12px
1
2
3
4
5
6
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

6.2 小号文本

对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。

你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。

1
<small>This line of text is meant to be treated as fine print.</small>

6.3强调

通过增加 font-weight 值强调一段文本。

1
<strong>rendered as bold text</strong>

6.4 斜体

用斜体强调一段文本。

1
<em>rendered as italicized text</em>

6.5对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

1
2
3
4
5
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

6.6 改变大小写

通过这几个类可以改变文本的大小写。

1
2
3
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

6.7 缩略语

6.7.1基本缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。

1
<abbr title="attribute">attr</abbr>

6.7.2首字母缩略语

为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

1
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

6.8 地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

1
2
3
4
5
6
7
8
9
10
11
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

6.9 引用

6.9.1默认样式的引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。

1
2
3
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

6.9.2多种引用样式

对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容。

命名来源

添加 <footer> 用于标明引用来源。来源的名称:可以包裹进 <cite>标签中。

1
2
3
4
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
另一种展示风格

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

1
2
3
<blockquote class="blockquote-reverse">
  ...
</blockquote>

7.列表

7.1无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

1
2
3
<ul class="list-unstyled">
  <li>...</li>
</ul>

7.2内联列表

通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

1
2
3
<ul class="list-inline">
  <li>...</li>
</ul>

7.3水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

1
2
3
4
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

8.代码

8.1内联代码

通过 <code> 标签包裹内联样式的代码片段。

1
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

8.2用户输入

通过 <kbd> 标签标记用户通过键盘输入的内容。

1
2
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

9.表格

9.1基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。image-20210824144619692

1
2
3
<table class="table">
  ...
</table>

9.2条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

image-20210824144738513

1
2
3
<table class="table table-striped">
  ...
</table>

9.3带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

image-20210824144803971

1
2
3
<table class="table table-bordered">
  ...
</table>

9.4鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

image-20210824144840688

1
2
3
<table class="table table-hover">
  ...
</table>

9.5 响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

垂直方向的内容截断

响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。

Firefox 和 fieldset 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：

image-20210824145112908

1
2
3
4
5
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

10. 表单

登录实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="" class="container">
	<form action="#" method="get">
		<div class="form-group">
			<label for="username">账号</label>
			<input type="text" name="username" id="username" class="form-control" placeholder="QQ号/手机/邮箱"/>
			<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
			</div>
        <div class="form-group">
            <label for="password">账号</label>
            <input type="password" name="password" id="password" class="form-control" />
        </div>
        <div class="form-group">
            性别(单选)
            <input type="radio" name="sex" id="sex" value="man" />男<label for="sex"></label>
            <input type="radio" name="sex" id="sex" value="woman" />女<label for="sex"></label>
        </div>
        <div class="form-group">
            爱好(多选):
            <input type="checkbox" name="hobby" id="sing" value="1" />唱歌<label for="sing"></label>
            <input type="checkbox" name="hobby" id="dance" value="2" />跳舞<label for="dance"></label>
            <input type="checkbox" name="hobby" id="travel" value="3" />旅游<label for="travel"></label>
				</div>
				<input type="submit" value="登录" />

			</form>
		</div>

详细请看:https://v4.bootcss.com/docs/components/forms/#switches

其他文章
cover
算法
回朔法
  • 25/09/27
  • 15:00
  • 648
  • 3
cover
JavaScript
Bootstrap
  • 25/09/27
  • 15:00
  • 3.1k
  • 12
由 Hexo 驱动 v7.3.0 主题 - Async v2.2.6
目录导航 置顶
  1. 1. Bootstrap
    1. 1.1. 1.Bootstrap安装与简介
    2. 1.2. 2.布局容器和栅格网格系统
      1. 1.2.1. 2.1布局容器
      2. 1.2.2. 2.2栅格网格系统
      3. 1.2.3. 2.3响应式列重置
    3. 1.3. 3.列偏移
    4. 1.4. 4.嵌套列
    5. 1.5. 5.列排序
    6. 1.6. 6样式
      1. 1.6.1. 6.1排版
      2. 1.6.2. 6.2 小号文本
      3. 1.6.3. 6.3强调
      4. 1.6.4. 6.4 斜体
      5. 1.6.5. 6.5对齐
      6. 1.6.6. 6.6 改变大小写
      7. 1.6.7. 6.7 缩略语
      8. 1.6.8. 6.8 地址
      9. 1.6.9. 6.9 引用
    7. 1.7. 7.列表
      1. 1.7.1. 7.1无样式列表
      2. 1.7.2. 7.2内联列表
      3. 1.7.3. 7.3水平排列的描述
    8. 1.8. 8.代码
      1. 1.8.1. 8.1内联代码
      2. 1.8.2. 8.2用户输入
    9. 1.9. 9.表格
      1. 1.9.1. 9.1基本实例
      2. 1.9.2. 9.2条纹状表格
      3. 1.9.3. 9.3带边框的表格
      4. 1.9.4. 9.4鼠标悬停
      5. 1.9.5. 9.5 响应式表格
    10. 1.10. 10. 表单