对Bootstrap的css基础样式进行总结归纳

最新推荐文章于 2023-09-05 15:04:41 发布
最新推荐文章于 2023-09-05 15:04:41 发布
阅读量1.4k 收藏 9
点赞数 2
分类专栏： Bootstrap框架 文章标签： bootstrap 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45637035/article/details/115405581
版权

概览

这篇博文是对bootstrap官方文档的总结，为什么我要对它进行总结呢？哈哈，有两个原因，第一，我想复习一下bootstrap框架的知识，第二，我有点不适应官方文档说的繁琐，冗余。我想自己做一份简单明了的文档。毕竟自己以前学过，但是，如果有小白，对这篇文章看的不太懂，请去官方文档查看，这是链接：Bootstrap全局css样式官方文档。

深入了解 Bootstrap 底层结构的关键部分，会让我们让web 开发变得更好、更快、更强壮。

HTML5 文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!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">
    <title>Title Page</title>
    <!-- jQuery 必须在Bootstrap JavaScript导入之前，因为bootstrap依赖jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
  ...
</html>

屏幕自适应

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

默认全局样式

Bootstrap 排版、链接样式设置了基本的全局样式。分别是：

  • 为 body 元素设置 background-color: #fff;
  • 使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数。
  • 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线。
  • Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

布局规范

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • **你的内容应当放置于“列（column）”内，**并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格参数

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度None （自动）750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列（column）数12
最大列（column）宽自动~62px~81px~97px
槽（gutter）宽30px （每列左右均有 15px）
可嵌套是
偏移（Offsets）是
列排序是

关系实例

所有“列（column）必须放在 ” .row 内，你写的内容放在column里面。

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

手机、平板、桌面不同布局

通过添加多个类，可以使网页在手机，平板，桌面实现不同类型的布局效果。

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

响应式列重置

在不同的屏幕上，可能会导致某些列可能会出现比别的列高的情况（文本内容多）。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。

<div class="row">
  <div class="col-xs-6 col-sm-3">我在小屏幕中的列变高了</div>  
  <div class="col-xs-6 col-sm-3">我的列低</div>

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

列偏移

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

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

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

<div class="row">
  <div class="col-sm-9">
    第一层内容
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        第二层内容
      </div>
      <div class="col-xs-4 col-sm-6">
        第二层内容
      </div>
    </div>
  </div>
</div>

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

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

文本样式

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

h1. Bootstrap headingSemibold 36px
h2. Bootstrap headingSemibold 30px
h3. Bootstrap headingSemibold 24px
h4. Bootstrap headingSemibold 18px
h5. Bootstrap headingSemibold 14px
h6. Bootstrap headingSemibold 12px
<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>

副标题

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

内联文本元素

添加高亮

<p>You can use the mark tag to <mark>highlight</mark> text.</p>

被删除的文本

对于被删除的文本使用 <del> 标签。

This line of text is meant to be treated as deleted text.

<del>This line of text is meant to be treated as deleted text.</del>

无用文本

对于没用的文本使用 <s> 标签。

This line of text is meant to be treated as deleted text.

<s>This line of text is meant to be treated as no longer accurate.</s>

插入文本

额外插入的文本使用 <ins> 标签。

This line of text is meant to be treated as an addition to the document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

带下划线的文本

为文本添加下划线，使用 <u> 标签。

This line of text will render as underlined

<u>This line of text will render as underlined</u>

小号文本

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

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

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

着重

通过<strong>强调一段文本。

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

斜体

用<em>斜体强调一段文本。

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

文本对齐

可以使用类.text-left .text-center .text-right使文本对齐，也可以使用css样式text-align使文本对齐。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

改变大小写

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

lowercased text.

UPPERCASED TEXT.

Capitalized Text.

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

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，鼠标移至上面时会变成带有“问号”的指针，等一会就会出现title表示的完整内容。所以必须要包含 title 属性。

An abbreviation of the word attribute is attr.

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

地址

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

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

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

引用

在你的文档中引用其他来源的内容。

直接引用

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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

命名来源

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

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

列表

无序列表

排列顺序无关紧要的一列元素。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
<ul>
  <li>...</li>
</ul>

有序列表

顺序至关重要的一组元素。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
<ol>
  <li>...</li>
</ol>

无样式列表

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

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

Integer molestie lorem at massa

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

水平排列的列表

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

内容一 内容二 内容三

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

描述性列表

带有描述的短语列表。

  • Description lists：

    A description list is perfect for defining terms.

  • Euismod：

    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

    Donec id elit non mi porta gravida at eget metus.

  • Malesuada porta：

    Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>标题1</dt>
  <dd>描述内容</dd>
  <dt>标题2</dt>
  <dd>描述内容</dd>
</dl>
水平排列的描述

添加类.dl-horizontal 可以让 <dl> 内的标题及其描述排在一行。 <dl> 的默认样式是垂直排列在一起的。

标题1 描述内容1

标题2 描述内容2

<dl class="dl-horizontal">
  <dt>标题1</dt>
  <dd>描述内容</dd>
  <dt>标题2</dt>
  <dd>描述内容</dd>
</dl>
自动截断

通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的标题。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

代码

内联代码

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

For example, <section> should be wrapped as inline.

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

用户输入

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

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>

代码块

多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。

<p>Sample text here...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

变量

通过 <var> 标签标记变量。

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

程序输出

通过 <samp> 标签来标记程序输出的内容。

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

条纹状表格

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

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table table-striped">
    <caption>表格标题</caption>
  <thead>
    <tr>
      <th>表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td>表体</td>
    </tr>
  </tbody>
</table>

带边框的表格

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

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table table-bordered">
  ...
</table>

鼠标悬停响应

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

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table table-hover">
  ...
</table>

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-condensed">
  ...
</table>

表格颜色

通过这些状态类可以为某一行或某个单元格设置颜色。

Class描述
.active鼠标悬停在行或单元格上时所设置的颜色
.success标识成功或积极的动作
.info标识普通的提示信息或动作
.warning标识警告或需要用户注意
.danger标识危险或潜在的带来负面影响的动作
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

响应式表格

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

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

表单

规范实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素包裹在 .form-group 中可以获得最好的排列。

<form>

    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>

    <div class="form-group">
        <label for="Pwd" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="Pwd" placeholder="Password">
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-2 control-label" for="sex">性别</label>
        <div class="col-md-5">
            <div class="radio-inline">
                <input type="radio" name="sex" id="sex-man" value="man" checked />男
            </div>
            <div class="radio-inline">
                <input type="radio" name="sex" id="sex-woman" value="woman" />女
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>

</form>

表单使用注意事项

  1. 不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
  2. 一定要添加 label 标签。
    如果你不想显示label中的文本内容，**你可以通过为 label 设置 .sr-only 类将其隐藏。**但是如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。

水平排列的表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

自定义设置宽度

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。当然，你也可以根据自己的需求，通过**百分比%**来自定义宽度

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<form class="form-horizontal">
    
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
    
</form>

被支持的控件

表单布局实例中展示了其所支持的标准表单控件。

输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

注意事项

  1. 必须添加类form-control,这样才能起作用。

  2. 必须添加正确的ype类型声明

    只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

<input type="text" class="form-control" placeholder="Text input">

文本域

支持多行文本的表单控件。可根据需要改变 rows 属性。

<textarea class="form-control" rows="3"></textarea>

多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

默认排列（垂直）
<div class="form-group">
    <label class="col-md-2 control-label" for="sex">性别</label>
    <div class="col-md-5">
        <div class="radio">
            <input type="radio" name="sex" id="sex-man" value="man" checked />男
        </div>
        <div class="radio">
            <input type="radio" name="sex" id="sex-woman" value="woman" />女
        </div>
    </div>
</div>

<div class="form-group">
    <label class="col-md-2 control-label" for="sex">爱好</label>
    <div class="col-md-5">
        <div class="checkbox">
            <input type="checkbox" name="sex" id="sex-man" value="man" checked />篮球
        </div>
        <div class="checkbox">
            <input type="checkbox" name="sex" id="sex-woman" value="woman" />桌球
        </div>
    </div>
</div>
内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

<div class="form-group">
    <label class="col-md-2 control-label" for="sex">性别</label>
    <div class="col-md-5">
        <div class="radio-inline">
            <input type="radio" name="sex" id="sex-man" value="man" checked />男
        </div>
        <div class="radio-inline">
            <input type="radio" name="sex" id="sex-woman" value="woman" />女
        </div>
    </div>
</div>

<div class="form-group">
    <label class="col-md-2 control-label" for="sex">爱好</label>
    <div class="col-md-5">
        <div class="checkbox-inline">
            <input type="checkbox" name="sex" id="sex-man" value="man" checked />篮球
        </div>
        <div class="checkbox-inline">
            <input type="checkbox" name="sex" id="sex-woman" value="woman" />桌球
        </div>
    </div>
</div>

下拉列表（select）

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
</form>

禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled" disabled>

fieldset整体禁用

为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

<a> 标签的链接功能不受影响

默认情况下，浏览器会将 <fieldset disabled> 内所有的原生的表单控件（<input>、<select> 和 <button> 元素）设置为禁用状态，防止键盘和鼠标与他们交互。然而，如果表单中还包含 <a ... class="btn btn-*"> 元素，并且不会阻止键盘用户能够获取焦点或激活这些链接。所以为了安全起见，建议使用自定义 JavaScript 来禁用这些链接。

只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示。

<div class="form-group has-success">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
</div>
<div class="form-group has-error">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
</div>

控件尺寸

宽度尺寸

通过向控件的父元素添加.col-lg-* 类似的类可以为控件设置宽度。

<div class="form-group has-success">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-lg-8">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
</div>
<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-6">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
</div>

高度尺寸

通过向控件添加类input-lg可以比默认值高一点；类.input-sm比默认值低一点。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

按钮

可作为按钮使用的元素

<a>、<button> 或 <input> 元素添加按钮类btn btn-default等，即可使用 Bootstrap 提供的样式。

<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">
注意事项
  1. 按钮类在导航和导航条组件只支持 <button> 元素。
  2. 如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。
  3. 我们总结的最佳实践是：强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

（默认样式）Default （首选项）Primary （成功）Success （一般信息）Info （警告）Warning （危险）Danger （链接）Link

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

设置尺寸

方式一

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

  1. （大按钮）Large button
  2. （默认尺寸）Default button
  3. （小按钮）Small button
  4. （超小尺寸）Extra small button
<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

方式二

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。只需要添加 .active 类就可以使按钮处于激活状态。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

button 元素

为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

a 元素

为基于 <a> 元素创建的按钮添加 .disabled 类。

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

图片

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，请添加 .center-block 类。

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded">  添加了圆弧
<img src="..." alt="..." class="img-circle">	圆形
<img src="..." alt="..." class="img-thumbnail">		添加了padding

关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。

×

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

响应式隐藏与可见

使用这些工具类可以方便的**针对不同设备展示或隐藏页面内容。**通过使用这些工具类可以在不同设备上提供不同的展现形式。

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px)
.visible-xs-*可见隐藏隐藏隐藏
.visible-sm-*隐藏可见隐藏隐藏
.visible-md-*隐藏隐藏可见隐藏
.visible-lg-*隐藏隐藏隐藏可见
.hidden-xs隐藏可见可见可见
.hidden-sm可见隐藏可见可见
.hidden-md可见可见隐藏可见
.hidden-lg可见可见可见隐藏

从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

类组CSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;

因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。

一切都是空白的
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
BootStrap CSS全局样式和表格样式源码解析
08-31
主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap学习心得总结-css样式设计分享
09-22
下面小编就为大家带来一篇bootstrap学习心得总结-css样式设计分享。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
简约大气的自适应（响应式）时尚网站源码
05-20
这份源码是一款简约大气的自适应（响应式）时尚类网站模板，特别适合初学者和新手小白学习与使用。它以简洁、现代的设计风格为特点，能够根据不同设备的屏幕尺寸自动调整布局，确保在各种平台上都能呈现出优秀的用户体验。注释清晰，适合初学者快速上手，学习并掌握网站前端开发的基本知识和技巧。
[译] JavaScript 中的 CSS：基于组件的样式的未来
weixin_34040079的博客
10-17 115
本文讲的是[译] JavaScript 中的 CSS：基于组件的样式的未来， 原文地址：CSS in JavaScript: The future of component-based styling 原文作者：Jonathan Z. White 译文出自：掘金翻译计划 译者：bambooom 校对者：Aladdin-ADD、reid329...
web前端 (18) Bootstrap 02
程序员哦的博客
12-21 273
目录 按钮 表单 响应式 输入框 栅格 按钮样式 给如下的html标签, 添加按钮样式class, 可以完成按钮样式的编写 : 1. span标签 (推荐) 2. button标签 3. input标签 type属性为 button/submit/reset ... 4. a标签 class 效果 btn 基本按钮效...
bootstrap学习记录
weixin_43157199的博客
09-25 147
重点强调文本 .lead .lead { margin-bottom: 20px; font-size: 16px; font-weight: 200; line-height: 1.4; } &amp;amp;amp;lt;li class=“list-unstyled”&amp;amp;amp;gt;有序列表去序号 &amp;amp;amp;lt;ul class=“list-inline”&amp;amp;amp;gt;实现内联列表 .list-inline { pad
bootstrap的Hello World
weixin_34122604的博客
02-14 267
<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"...
详细介绍 display: block（块级元素）、inline-block（行内块元素）和inline（行内元素）的差别
最新发布
qq_43532275的博客
09-05 2296
详细介绍 display: block（块级元素）、inline-block（行内块元素）和inline（行内元素）的差别
bootstrap中display的响应式应用
weixin_48047636的博客
04-24 174
HTML <body> <div class="container"> <div class="selfctrl"> <!-- 用display:block和宽度百分百消除img自带的白边 --> <img src="../img/p617533616.webp" alt="" class="d-block w-100" > </div> &
bootstrap4
cclym的博客
09-01 144
bootstrap4 网格系统 bootstrap 提供一套响应式、移动设备优先的流式网格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列 系统网格 网格系统有5类 .col- 针对所有设备 .col-sm- 平板-屏幕宽度等于大于576px .col-md- 桌面显示器-屏幕宽度等于大于768px .col-lg- 大桌面显示器 - 屏幕宽度等于大于992px .col-xl- 超大桌面显示器-屏幕宽度等于大于1200px <body>
html班级主页设计
05-14
包含html5与css的结合，适合于网页开发等小作业 ，
Bootstrap树css样式特效代码
03-20
Bootstrap树css样式结构美观
Bootstrap树css样式.zip
07-03
Bootstrap树css样式结构美观
bootstrap3全局css样式中文文档
06-13
bootstrap3全局css样式中文文档，设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
纯CSS3 Bootstrap步骤箭头按钮样式
11-04
纯CSS3 Bootstrap步骤箭头按钮样式 纯CSS3 Bootstrap步骤箭头按钮样式
bootstrap css样式之表单
12-29
本文实例为大家分享了bootstrap表单的具体代码，供大家参考，具体内容如下 1、表单基本用法 <form role=form> <label for=exampleInputEmail1>Email address <input type=email class=form-control ...
Bootstrap CSS使用方法
11-30
Bootstrap中CSS的使用方法，供大家参考，具体内容如下 1、GitHub上这样介绍 bootstrap： :ballot_box_with_check: 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 :ballot_box_with_...
Bootstrap常用的css样式和组件的描述
08-16
这个资源是一个思维导图的形式，主要的目的是学习bootstrap中常用的样式和常用的组件。方便我们在后面学习python的web框架的时候遇到写页面的时候可以达到我们的预期。如果不能看明白的话，在后期还会上传一些例子和...
bootstrap集成table样式的总结
05-25
bootstrap集成table样式的总结，总结了各种bootstrap集成的table样式
导入Bootstrap基础样式文件bootstrap.min.css
06-02
可以使用以下代码将Bootstrap基础样式文件bootstrap.min.css导入到HTML文件中： ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css"> ``` 这里使用了Bootstrap的CDN链接，如果你已经下载了Bootstrap的文件，也可以使用相对路径或绝对路径将文件导入到HTML文件中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值