2021-10-4Bootstrap

于 2021-10-04 11:19:36 发布
阅读量970 收藏 2
点赞数
分类专栏： 学前端 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kesin_lee/article/details/120601135
版权

全局CSS样式

基础模板

<!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">
    <title>基础模板</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- HTML5 shiv 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!-- 条件注释的作用：条件满足时，执行注释中的HTML代码 条件不满足时，就会当做注释-->
    <!--[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]-->
    
    <!-- 自己写的CSS文件 -->
    <link rel="stylesheet" type="text/css" href="">
</head>
<body>
    <!-- 必须引入，且位置必须这样-->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jselivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- 自己写的js文件-->
    <script src=""></script>
</body>
</html>

模板中移动端所用到的属性介绍
width:视口的宽度 width=device-width => 视口的宽度随着设备的宽度进行响应式变化。
initial-scale：初始化缩放
minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
maximum-scale:最大缩放

栅格参数

默认一行12列
在这里插入图片描述

栅格系统

在这里插入图片描述

布局容器 .container .container-fluid

row必须包含在布局容器里面 不然会没有alignment和padding

row的直接子元素只能是col

为col设置padding 从而创建列与列之间的间隔(gutter) ; 为.row设置负margin-left 抵消.container的padding，也就间接为row包含的col抵消掉了padding

列偏移 col-xs-offset-8

列嵌套

<div class='container'>
	<div class='row'>
		<div class='col-sm-6'>
			<div class='row'>
				<div class='col-sm-4'>4</div>
				<div class='col-sm-4'>4</div>
				<div class='col-sm-4'>4</div>
			</div>
		</div>
	</div>
</div>

列排序 push向右推 pull向左拉

例

<div class='row'>
	<div class= 'col-md-2 row-md-push-3'>  向右推三列</div>
</div>

排版

标题

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

例如

<span class='h1'>具有h1标签样式的文本</span>
在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题

例如

<h2>今天吃什么？<small>不知道，心情不好，没胃口</small></h2>
<h2>今天吃什么？<span class='small'>不知道，心情不好，没胃口</span></h2>

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 body 元素和所有段落元素。另外，p(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
.lead 突出显示
<p class='lead'>今天吃什么？<small>不知道，心情不好，没胃口</small></p>

内联文本元素

标记文本 <;mark>高亮</mark>
删除文本和无用文本 <del>被删除的文本</del>和<s> 无用文本</s>的格式没有区别 只有语义上的区别
插入文本和下划线文本 <ins>被删除的文本</ins>和<u> 无用文本</u>的格式没有区别 只有语义上的区别
小号文本 对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。也可以为行内元素赋予 .small 类以代替任何 元素。
着重(加粗)和斜体 <strong>rendered as bold text<strong> <em>rendered as bold text<em>
对齐方式
	<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">转成小写 apple banana car dog</p>
    <p class="text-uppercase">转成大写 apple banana car dog</p>
    <p class="text-capitalize">首字母大写 apple banana car dog</p>
缩略语 <attr titele=“隐藏的内容”>显示的内容<attr>
	    <abbr title="一室一厅一书房、卫生间带大浴缸、厨房够大4个人做饭依旧宽敞、阳台有天文望远镜、有个衣帽间也不错、两个冰箱(厨房一个客厅一个)、扫地机器人、自动洗碗机、黏人的小猫咪、书房电脑桌足够长可升降">单人的理想居住环境什么样子？</abbr>
引用 blockquote
<blockquote>
    <p>12341241</p>
</blockquote>

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

//右对齐  cite表示倾斜 添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
<blockquote class='blockquote-reverse'>
	<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>
列表 无样式列表 添加类 .list-unstyled 内联列表 .list-inline
	<ul class="list-unstyled">
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
    <ul class="list-inline">
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

<dl>
	<dt>上午</dt>
	<dd>语文</dd>
	<dd>数学</dd>
</dl> 
//.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
<dl class='dl-horizontal'>
	<dt>下午</dt>
	<dd>英语</dd> 
	<dd>体育</dd>
</dl>

在这里插入图片描述

表格

类table-striped table-bordered table-hover table-condensed acitve info success danger warning

通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
通过这些状态类可以为行或单元格设置颜色。
在这里插入图片描述

  <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td class="info">景天</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr class="success">
            <td>唐雪见</td>
            <td>16</td>
            <td>女</td>
        </tr>
        <tr class="danger">
            <td>徐长卿</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>紫萱</td>
            <td class="warning">不详</td>
            <td>女</td>
        </tr>
    </table>

响应式表格 表格过长 出现滚动条

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 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="userName">姓名</label>
            <input type="text" class="form-control" id="userName" placeholder="UserName">
        </div>
        <div class="form-group">
            <label for="userAddress">地址</label>
            <input type="text" class="form-control" id="userAddress" placeholder="Address">
            <p class="help-block">Example block-level help text here.</p>
        </div>
    </form>

内联表单

    <!--单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。-->
    <!--为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。-->
    <form class="form-inline">
        <div class="form-group">
            <label for="userName">姓名</label>
            <input type="text" class="form-control" id="userName" placeholder="UserName">
        </div>
        <div class="form-group">
            <label for="userAddress">地址</label>
            <input type="text" class="form-control" id="userAddress" placeholder="Address">
            <!--<p class="help-block">Example block-level help text here.</p>-->
        </div>
    </form>
水平排列表单 form-horizontal
 	<!--在label标签中添加control-label属性后,label标签就变成了可控制的标签,可以通过不同的属性值来控制当前控件的状态。-->
    <!--对form表单标签添加.form-horizontal类，使每个form-group里的内容水平排列-->
    <form class="form-horizontal">
        <div class="form-group">
            <label for="userName2" class="col-md-3 control-label">姓名</label>
            <div class="col-md-9">
                <input type="text" class="form-control" id="userName2" placeholder="UserName2">
            </div>
        </div>
        <div class="form-group">
            <label for="userAddress2" class="col-md-3 control-label">地址</label>
            <div class="col-md-9">
                <input type="text" class="form-control " id="userAddress2" placeholder="Address2">
            </div>
        </div>
    </form>
被支持的控件
<input type="text" class="form-control" placeholder="Text input">
文本域 textarea
<input type='textarea' rows='10'>
多选和单选框 checkbox radio

只有框 而没有框后的内容 在input标签内 写上 aria-label
使多选框/单选框 及其框后的内容不可选 在div内加上disabled类 和input加disabled属性
同一行显示多个多选框或单选框 将同一行显示的内容 不放在div里 并在lable标签内 加上checkbox-inline类或radio-inline类
PS: 单选框需要有共同的name属性 才能实现单选

<div class="checkbox">
        <label><input type="checkbox">apple</label>
    </div>
    <div class="checkbox disabled">
        <label><input type="checkbox" disabled>banana 不可选</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" aria-label="..."></label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" id="userName3">用户3
        </label>
    </div>
    <div class="radio">
        <label><input type="radio" aria-label="..."></label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" id="userName4">用户4
        </label>
    </div>
    <div class="radio disabled">
        <label>
            <input type="radio" id="userName5" disabled>用户5 不可选
        </label>
    </div>
下拉列表 select

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

	<select class='form-control' multiple>
		<option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>	
    </select>
静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为

元素添加 .form-control-static 类即可

<form class="form-horizontal">
        <div class="form-group">
            <label class="col-md-3 control-label">Email</label>
            <div class="col-md-9">
                <p class="form-control-static">email@example.com</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">Password</label>
            <div class="col-md-9">
                <input type="password" class="form-control" placeholder="password">
            </div>
        </div>
    </form>
焦点状态

将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性

禁用状态 disabled

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。
被禁用的 fieldset
为 设置 disabled 属性,可以禁用 中包含的所有控件。

<form>
  <fieldset disabled>
    <div class="form-group">
            <label class="sr-only">Email</label>
            <p class="form-control-static">email@example.com</p>
        </div>
        <div class="form-group">
            <!-- .sr-only sr-only全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。给残障人士(弱视或盲人)使用的屏幕阅读器读取但是不会影响UI的视觉呈现-->
            <label for="inputPassword2" class="sr-only">Password2</label>
            <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-default">Confirm identity</button>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
只读状态 readonly

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

    <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
提示文本 .help-block
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
校验样式 .has-success .has-warning .has-error

使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

控件尺寸
高度尺寸

默认md 还有lg和sm 没有xs

<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>
水平排列的表单组的尺寸

通过对div的.form-group添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸

按钮

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

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

详见bootstrap的全局CSS样式 文档

预定义样式

class=“btn btn-default”
除btn-default 还有btn-primary btn-info btn-success btn-warning btn-danger btn-link
在这里插入图片描述

尺寸

使用 .btn-lg、默认是btn-md、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
在这里插入图片描述
通过给按钮添加 .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>

在这里插入图片描述

激活状态 给button、a添加active类

禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果
为 <button> 元素添加 disabled 属性，使其表现出禁用状态 disabled=‘disabled’
为a标签添加disabled类 class=‘btn disabled’ 使其表现出禁用状态

图片

响应式图片

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

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

图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

辅助类

情境文本颜色

text-muted 颜色浅
text-primary text-success text-info text-warning text-danger
在这里插入图片描述

情境背景颜色

bg-primary bg-success bg-info bg-warning bg-danger

关闭按钮

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

三角符号

<span class="caret"></span>

快速浮动

添加 .pull-left 实现左浮动 添加 .pull-right 实现右浮动

让内容块居中

添加类 .center-block

清除浮动

为父元素添加类 .clearfix

显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏

图片替换(文字隐藏 )

.text-hide 用来将文字隐藏 例如将h1标签的文本隐藏 使h1能被搜索引擎抓取到 但是不会显示出文字内容

<h1 class="text-hide">Custom heading</h1>

组件

Glyphicons 字体图标

详细使用的注意事项见文档

<!--Glyphicons 字体图标  先写glyphicon这个类名  再在类中加入该图标的名字 例如：-->
<span style="color: #9ACD32;font-size: 30px " class="glyphicon glyphicon-signal"></span>

下拉菜单

实例

去bootstrap的文档里直接复制粘贴实例，并进行相应修改即可

对齐 ul class=“dropdown-menu dropdown-menu-right”

标题 li class=“dropdown-header”

分割线 li role=“seperator” class=“divider”

禁用的菜单项 li class=“disabled”

按钮组 ：把一组按钮放在一行

//三个按钮在一行
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

在这里插入图片描述

按钮工具栏
<div class="btn-toolbar" role="toolbar">
        <div class="btn-group" role="group">
            <button class="btn btn-default">1</button>
            <button class="btn btn-default">2</button>
            <button class="btn btn-default">3</button>
            <button class="btn btn-default">4</button>
        </div>
        <div class="btn-group" role="group">
            <button class="btn btn-default">5</button>
            <button class="btn btn-default">6</button>
            <button class="btn btn-default">7</button>
        </div>
        <div class="btn-group" role="group">
            <button class="btn btn-default">8</button>
        </div>
    </div>

在这里插入图片描述
尺寸
给 btn-group 加上 btn-group-lg 该组内的按钮都变成lg尺寸
lg、 默认是md、sm、xs
在这里插入图片描述

嵌套
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

在这里插入图片描述

垂直排列 div class=“btn-group btn-group-vertical”
<div class="btn-group btn-group-vertical" role="group" aria-label="...">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
       
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>

在这里插入图片描述

两端对齐排列的按钮组 class=“btn-group btn-group-justified”

关于 <a>元素
只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可
关于 <button> 元素
为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group

<div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-default">left</a>
        <a href="#" class="btn btn-default">middle</a>
        <a href="#" class="btn btn-default">right</a>
        <div class="btn-group">
            <button class="btn btn-default">aaa</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-default">bbb</button>
            </di
    </div>

在这里插入图片描述

按钮式下拉菜单

向上弹出式

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打

<!--按钮式下拉菜单-->
    <div class="btn-group">
        <button class="btn dropdown-toggle btn-success" type="button" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
            Success<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another Action</a></li>
            <li class="divider" role="separator"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    
<!--向上弹出式 分裂式菜单(按钮上显示的字与三角形之间有一条线)-->
    <div class="btn-group dropup">
        <button type="button" class="btn btn-info btn-lg">Info分裂式按钮</button>
        <button class="btn btn-default dropdown-toggle btn-info btn-lg" type="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another Action</a></li>
            <li class="divider" role="separator"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

在这里插入图片描述

导航 nav

标签页 .nav-tabs

<ul class="nav nav-tabs">
     <li role="presentation" class="active"><a href="#">Home</a></li>
     <li role="presentation"><a href="#">Profile</a></li>
     <li role="presentation"><a href="#">Messages</a></li>
/ul>

在这里插入图片描述

胶囊式标签页 .nav-pills

<ul class="nav nav-pills">
     <li role="presentation" class="active"><a href="#">Home</a></li>
     <li role="presentation"><a href="#">Profile</a></li>
     <li role="presentation" ><a href="#">Messages</a></li>
</ul>

在这里插入图片描述
胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类

<ul class="nav nav-pills nav-stacked">

在这里插入图片描述

两端对齐的标签页 .nav-justified 已经弃用

在这里插入图片描述

禁用的链接 .disabled 实现链接为灰色且没有鼠标悬停效果

添加下拉菜单

<ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation" class="disabled"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Question</a></li>
            <li role="presentation" class="dropdown" >
                <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Messages <span class="caret"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-justified">
                    <li><a href="#">111</a></li>
                    <li><a href="#">222</a></li>
                </ul>
            </li>
        </ul>

在这里插入图片描述

导航条 .navbar

路径导航 .breadcrumb

<ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li role="active">Data<span class="badge">43</span></li>
    </ol>

分页 .pagination

<nav aria-label="Page navigation">
        <ul class="pagination pagination-lg" >
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li class="active"><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>

禁用和激活状态

建议将 active 或 disabled 状态的链接（即 < a> 标签）替换为 < span> 标签，或者在向前/向后的箭头处省略< a> 标签，这样就可以让其保持需要的样式而不能被点击。

尺寸 pagination-lg 不写则默认是md

翻页 ul class=“pager”

 <nav aria-label="...">
        <!--默认居中-->
        <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
        <!--可两端对齐-->
        <ul class="pager">
        <!--.disabled 类也可用于翻页中的链接-->
            <li class="previous disabled"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </nav>

在这里插入图片描述

标签 class=“label label-default” success、info、warning、danger

    <h3>Example heading <span class="label label-danger">Danger</span></h3>

在这里插入图片描述

徽章 class=“badge”

给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目

巨幕 class=“jumbotron”

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。

<div class="jumbotron">
        <div class="container">
            <h1>Hello World!</h1>
            <p>...</p>
            <p><a href="#" class="btn btn-primary btn-lg">Learn More</a></p>
        </div>
    </div>

在这里插入图片描述
如果在div class=“jumbotron” 外面再套一个div class=“container-fluid” 则有圆角
在这里插入图片描述

缩略图 .thumbnail

 <div class="row">
        <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
                <img src="../day02/1.png" alt="">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
                <img src="../day02/1.png" alt="">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        ...
    </div>

在这里插入图片描述

警告框 .alert 只有success、info、warning、danger

警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。

<div class="alert alert-info">
        <button class="close" type="button" role="button" ><span>&times;</span></button>
        <strong>info!</strong>Better check yourself, you`re not <a href="#">Looking good</a>
    </div>

可关闭的警告框 .alert-dismissible

data-dismiss=“alert” aria-label="Close"不要缺
对于链接 要有 .alert-link类名 使链接变粗并使颜色与警告框相近

<div class="alert alert-info alert-dismissible">
        <button class="close" type="button" role="button" data-dismiss="alert" aria-label="Close"><span>&times;</span></button>
        <strong>info!</strong>Better check yourself, you`re not <a class="alert-link" href="#">Looking good</a>
    </div>

进度条 .progress

<div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
            <span >60%</span>
        </div>
    </div>

在这里插入图片描述

在很低的百分比时，让文本提示能够清晰可见，为进度条设置 min-width 属性

<div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width:0%;">
            <span class="sr-only">0% Complete</span>
            <span >0%</span>
        </div>
    </div>

在这里插入图片描述

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果

progress-bar-success info warning danger 默认蓝色

条纹效果 .progress-bar-striped

条纹的动画效果 .progress-bar-striped .active

在这里插入图片描述

堆叠效果

把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。

媒体对像 .media

.media-right 需要在.media-body的后面写

对齐

图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐

媒体对象列表 (对评论或文章列表很有用)

在…下一行 复制一遍ul

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

在这里插入图片描述

列表组

徽章、链接、按钮、disabled、情景类(success等)、active

    <!--在列表组中加入徽章badge，会自动放在右边-->
    <!--用a标签代替li标签，可以组成一个全是链接的列表组，此时将ul替换成div即可，没必要给列表组中每一个元素都加一个父元素-->
    <!--列表中的元素可以直接是按钮，那么父元素就必须是div而不能是ul 且不能使用标准的.btn类-->
    <!---列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组-->
    <ul class="list-group" style="width: 300px;margin-left: 20px">
        <li class="list-group-item">
            <span class="badge">2</span>语文
        </li>
        <li class="list-group-item">数学</li>
        <li class="list-group-item">英语</li>
    </ul>
    <hr>
    <div class="list-group" style="width: 300px;margin-left: 20px">
        <a class="list-group-item" href="#">
            <span class="badge">2</span>语文
        </a>
        <a class="list-group-item disabled" href="#">数学</a>
        <a class="list-group-item active" href="#">英语</a>
        <button class="list-group-item list-group-item-danger">报名</button>
    </div>

在这里插入图片描述

面板 .panel

带标题、注脚的面板

<div class="panel panel-default">
        <div class="panel-heading">Panel without title</div>
        <div class="panel-body">
            panel-content
        </div>
    </div>
    
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">Panel-title 标题</h3>
        </div>
        <div class="panel-body">
            panel content
        </div>
        <div class="panel-footer">Panel-footer注脚</div>
    </div>

在这里插入图片描述

带表格的面板

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>
kesin_lee
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap-栅格系统
sofia92的博客
03-25 2992
一、栅格参数是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs- 和 .col-md-。请看下面的实例，研究一下这些是如何工作的。 比如HTML代码：<div class="row"> <div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"> content
platzi-bootstrap-2021
03-18
【标题】"platzi-bootstrap-2021" 指的是一门关于Bootstrap的在线课程，由知名教育平台Platzi在2021年提供的。Bootstrap是世界上最流行的前端开发框架，它允许开发者快速构建响应式、移动优先的网站。这门课程可能是...
Bootstrap图标实现移动端的星星评分功能
04-30
利用Bootstrap图标实现移动端的星星评分功能，兼容各大平台系统，测试通过安卓和苹果手机！
前端 vue编译 依赖库 报错问题Class constructor FileManager cannot be invoked without 'new'
stone_tomcate的博客
08-19 4411
[1m[31mERROR in ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-load...
bootstrap页面排版和栅格处理
mid_python的博客
01-14 709
1.下载编译后的bootstrap导入css和js，导入jQuery要在bootstrap.min.js上； &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=dev
bootstrap-switch,切换触发事件及动态切换以及readonly属性设置
zhangustb
08-07 1392
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <link h.
hackathon2021-源码.rar
10-10
【标题】"hackathon2021-源码.rar" 提供的是2021年黑客马拉松活动的源代码集合，通常这样的文件是参赛者或开发者在编程竞赛或协同开发项目中分享的代码资源。这类文件对于参与者和学习者来说具有很高的价值，因为它...
gobarber2021-web
02-13
7. **UI框架**：为了快速构建用户界面，项目可能使用了`React`、`Angular`或`Vue.js`这样的前端框架，并配合`Material-UI`、`Bootstrap`或`Element UI`等UI库。 8. **测试**：高质量的项目通常会有单元测试和集成...
bootstrap-fileinput API 文档
04-19
Bootstrap-fileinput 是一个流行的、高度可定制的文件输入插件，它将传统的文件选择体验转变为一个功能丰富的上传组件。这个插件充分利用了Bootstrap框架的样式和功能，为网页中的文件上传提供美观且用户友好的界面...
2021-Portfolio：2021投资组合
02-23
【2021-Portfolio：2021投资组合】是一个关于个人或机构在2021年度的投资策略和资产配置的项目。这个项目可能包含了各种金融产品、股票、债券、基金、数字货币等不同类型的资产，旨在展示投资者如何通过多元化投资来...
react结合bootstrap实现评论功能
10-15
主要为大家详细介绍了react结合bootstrap实现评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Html5----响应式（自适应）网页设计（自动适应屏幕大小）
qq_44740978的博客
08-16 5630
1、在网页代码的头部，加入一行viewport元标签 在网页的中增加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释： 属性 描述 width=device-width width为设置layout viewport 的宽度，为一个正整数，”width-device”表示宽度是设备屏幕的宽度 initial-scale=1.0 initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占网页的100% minimum-scale=1.0 表示最小的缩放比例
Bootstrap4——字体大小根据屏幕改变解决方案
无限迭代中......
02-13 1万+
官方文档 https://v4.bootcss.com/docs/content/typography/#responsive-font-sizes 说明 「自适应字体尺寸」，下简称 RFS，这也是 Bootstrap GitHub 仓库中的一个新项目。RFS根据访问者设备或浏览器窗口的尺寸自动计算合适的字体大小(font-size)。 下面是它的工作过程： 所有font-siz...
HTML中让表单input等文本框为只读不可编辑的方法
热门推荐
babyZeng
02-25 8万+
有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息， 如使input text的内容，中国两个字不可以修改有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息， 如使&lt;input type="text" name="input1" value="中国"&gt; 的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。  方法1: onfocus=th...
bootstrap（三）表单
qq_38904347的博客
10-01 316
输入框 通过制定类名.form-control实现一些设计上的定制效果 1.宽度变成了100% 2.设置了一个浅灰色（#ccc）的边框 3.具有4px的圆角 4.设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5.设置了placeholder的颜色为#999 &lt;input type="text" class="form-control"&gt; 下拉选择框 通过设置multt...
[置顶] html学习笔记，锚点，超链接，table布局，表头，h,sub,blockquote,ul,li,ol.dl,加入收藏，打印，弹出窗口...
weixin_30911451的博客
07-27 178
<a name="shouye"></a> <strong>strong加粗</strong> <br> 没有加粗 <br> <b>b加粗</b> <br> <font size="7"color="red"> <strong>加粗</s...
bootstrap table 复选框使用
weixin_30706507的博客
09-18 412
var columns = [ { field : 'checked', checkbox: true, align: 'center', valign: 'middle', formatter:function(value,row,index){//设置满足条件的行可以使用复选框 if(row.IS_PASS...
基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统实战教程
10-13
本系列课程主要讲述如何利用Servlet3.0+JDBC+Bootstrap+MYSQL+Ajax+构建企业级应用解决方案,主要分为两部分完成第一部分：设计部分，通过需求分析，设计物理模型，画出原型界面（HTML）第二部分：编码部分，具体实现各个功能模块
bootStrap学习10---- 表单
历程
05-22 449
.form-control 所有的基础表单元素，在form-control类的控制下，都会被定义宽度等信息。 所有设置了 .form-control 类的 、 和  元素都将被默认设置宽度属性为 width: 100%; 例如: .form-group label和表单元素包裹在.form-group中，可以获得比较好的排列。 输入框组和表单组不要混合使用
使用bootStrap4实现，广州市科协网官网
最新发布
06-07
好的，以下是使用 Bootstrap 4 实现广州市科协网官网的一些思路和示例代码： 1. 布局：使用 Bootstrap 4 的栅格系统来布局页面，将页面划分为不同的区域，如顶部导航栏、主内容区、底部版权信息等。可以使用容器（`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值