标签：... 元素样式 button bootstrap 基础栅格第六章 col

bootstrap简介

该框架已经帮你写好了很多的页面样式，你如果需要使用，只需要下载对应的文件，之后直接cv拷贝即可

在使用bootstrap的时候所有的页面样式都只需要通过class来调节即可

版本建议选择v3版本：https://v3.bootcss.com/

注意

bootstrap的js代码是依赖也jQuery的，也就是意味着你在使用bootstrap动态效果的时候一定啊哟导入jQuery

导入方法

第一种：网络cdn引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入jQuery的js文件t-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
    <!--引入bootstrap的css文件-->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>

</body>
</html>

第二种：本地文件引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入jQuery的js文件t-->
    <script src="../jQuery3.6/compressed.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <!--引入bootstrap的css文件-->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <title>Title</title>
</head>
<body>

</body>
</html>

布局容器

container			左右两侧有留白
container-fluid		左右两侧没有留白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container c1">
        左右两侧有留白
    </div>

    <div class="container-fluid c1">
        左右两侧没有留白
    </div>
</body>
</html>

栅格系统

官网

https://v3.bootcss.com/css/#grid-options

简介

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

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

<body>
    <!--写一个row就是把当前标签分成12分-->
    <div class="row">
        <!--col-md-6表示这个标签占父标签12份中的其中6份-->
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</body>

// 在使用bootstrap的时候脑子一定要做12的加减

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

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

如果想要兼容所有的屏幕，把类全加上即可

<body>
    <div class="row">
        <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6"></div>
        <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6"></div>
    </div>
</body>

列偏移

<div class="row">
	<!--向右移动两份的距离-->
    <div class="col-md-8 col-md-offset-2">

    </div>
</div>

嵌套列

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-3"></div>
                    <div class="col-md-3"></div>
                    <div class="col-md-3"></div>
                </div>
            </div>
            <div class="col-md-6"></div>
        </div>
    </div>
</body>

媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <title>Title</title>
    <style>
        .c1{
            height: 50px;
            background-color: red;
            border:1px solid black;
        }

        /*监测浏览器屏幕大小，一旦超过600px就会改变样式*/
        @media screen and (max-width:600px) {
            .c1{
                height: 50px;
                background-color: yellow;
                border:1px solid black;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 c1"></div>
            <div class="col-md-6 c1"></div>
        </div>
    </div>
</body>
</html>

全局css样式

排版

在官网中有详细介绍：https://v3.bootcss.com/css/#type

bootstrap中帮你把标签中的文字进行了优化，用肉眼看起来要舒服一点

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

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外， （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
通过添加 .lead 类可以让段落突出显示。

内联文本元素

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

被删除的文本
无用文本
插入文本
带下划线的文本
小号文本
着重
斜体

对齐

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

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

改变大小写

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

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

缩略语

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

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

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

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

地址

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

<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:#">[email protected]</a>
</address>

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

默认样式的引用

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

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

多种引用样式

对于标准样式的

，可以通过几个简单的变体就能改变风格和内容。
// 添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

<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 类可以让引用呈现内容右对齐的效果。
<blockquote class="blockquote-reverse">
  ...
</blockquote>

列表

自行观看

表格

基本实例
条纹状表格
带边框的表格
鼠标悬停
紧缩表格

状态类

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

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

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

响应式表格

table类

把表格变好看，为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

table-bordered类

为表格添加边框

table-condensed类

使表格更加的紧凑

table-hover类

每一行对鼠标悬停状态作出响应

table-striped类

给 tbody标签之内的每一行增加斑马条纹样式

table-responsive 类

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <title>Title</title>
</head>
<body>
    <div class="container text-center">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-bordered table-condensed table-hover table-striped">
                    <thead>
                        <tr>
                            <th class="text-center">ID</th>
                            <th class="text-center">name</th>
                            <th class="text-center">password</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>刘杰</td>
                            <td>123456</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>刘杰</td>
                            <td>123456</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>刘杰</td>
                            <td>123456</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>刘杰</td>
                            <td>123456</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

表单

表单常用

form-control

针对表单标签加样式通常加一个form-control就行了，checkbox和radio一般不加form-control，因为加了还丑一点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <title>Title</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <form action="">
                    <p>账号：<input type="text" class="form-control"></p>
                    <p>密码：<input type="password" class="form-control"></p>
                    <textarea name="" cols="30" rows="10" class="form-control"></textarea>
                    <select name="" class="form-control">
                        <option value="">111</option>
                        <option value="">222</option>
                        <option value="">333</option>
                    </select>
                    <input type="file" class="form-control">
                    <input type="checkbox">111
                    <input type="checkbox">222
                    <input type="checkbox">333
                    <input type="radio" name="gen">男
                    <input type="radio" name="gen">女
                    <input type="submit" class="form-control">

                </form>
            </div>
        </div>
    </div>
</body>
</html>

input框变色提示用户密码/账号错误

记得是给input框的父标签加

// has-error：input框变红
// has-success：input框变绿

<p class="has-error">
    账号：<input type="text" class="form-control">
</p>
<p class="has-success">
    密码：<input type="password" class="form-control">
</p>

按钮

可作为按钮使用的标签或元素

为 a、input、button 元素添加按钮类（button class）即可使用 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">

预定义样式

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

<!-- 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 就可以获得不同尺寸的按钮

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

禁用状态

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

<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标签创建的按钮添加 .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>

图片

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

// 圆角
<img src="..." alt="..." class="img-rounded">
// 圆形
<img src="..." alt="..." class="img-circle">
// 带有白框
<img src="..." alt="..." class="img-thumbnail">

组件

网址：https://v3.bootcss.com/components/

字体图标

使用

复制图标下的代码即可

不要和其他组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 span 标签，并将图标类应用到这个 span 标签上。

只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

实例

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

拓展：fontawesome字体图标站

网址：https://fontawesome.com.cn/faicons/

使用方法

在head标签引入，需要网络才能显示出来

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

进度条

可以动的进度条

    <!--    进度条-->
    <div class="progress">
        <div id="d1" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
             aria-valuemin="0"
             aria-valuemax="100" style="width: 0%">
            <span class="sr-only">45% Complete</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            <button id="d2">进度条开始</button>
        </div>
    </div>
<script>
    let i = 0

    function func() {
        i++
        if (i === 100) {
            clearInterval(t)
        }
        let styWidth = 'width:' + i + '%'
        let styText = i + '%'
        $('#d1').attr('style', styWidth).text(styText)
    }

    $('#d2').on('click', function () {
        t = setInterval(func, 100)
    })
</script>

导航条

// 黑色
<nav class="navbar navbar-inverse">
// 白色
<nav class="navbar navbar-default">

分页器

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    // 加上active有激活态
    <li class="active"><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>

js插件

模态框

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <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-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <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>
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

面包屑(标签页)

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

轮播图

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

标签：...,元素,样式,button,bootstrap,基础,栅格,第六章,col
From： https://www.cnblogs.com/liuhousheng/p/16964635.html

第六章：bootstrap基础