Bootstrap(一)——Bootstrap基础知识

最新推荐文章于 2024-04-27 23:07:09 发布
最新推荐文章于 2024-04-27 23:07:09 发布
阅读量2k 收藏 27
点赞数 5
分类专栏： # Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rjlmylover_zyw/article/details/121354950
版权

文章目录

Bootstrap使用方法

  1. 创建文件夹，将所需的图片，音频，视频，Bootstrap库放到同一个文件夹中
  2. 创建 Bootstrap框架，下面是直接引用
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

然后就可以使用Bootstrap了

网络结构

Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
所以！非常好用！

  • 用法

Bootstrap会把页面分为12等份，
首先建立一个<class="container">容器
通过.row建立一行 ，（row在container里）每一行中用.col-*-*建立一列。
其中第一个“*”表示响应的设备: xs，sm, md, lg 或 xl,
在这里插入图片描述
第二个“*”表示这一列所分的份数。一行相加总份数要等于12.

注意：

  1. 如果所加和大于12，多余的列所在的元素会被作为一个整体另起一行。
  2. 如果和小于12，会留有空白，占不满一行。
  3. 每一列默认左右有15px的padding
  4. 可以同时为一列指定多个设备名，<... class="col-lg-4 col-sm-6">
    像这样在div里面把.col-xs-12，.col-sm-6，.col-md-4，.col-lg-3，都写上就可以实现媒体查询
  5. 要实现媒体查询，这里有个响应式工具，可以比以上简洁些，加在目标盒子的class就可
    在这里插入图片描述
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>RUNOOB</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>菜鸟教程</p>
    </div>
  </div>
</div>

- 推-拉-扯
让一行内的列换位置
<class="col-lg-8 col-lg-push-4">左侧
<class="col-lg-4 col-lg-pull-8">右侧

  • 列嵌套
    像这样
    在这里插入图片描述
    具体做法就是
    在.row里面再套一个.row
    在这里插入图片描述

  • 列偏移
    offest-*-*
    第一个“*”是xs，sm，md，lg，
    第二个“*”是1-11数字。
    比如.offest-md-4就是让col-md-4左偏移4格

  • 一行一个盒子，让它居中
    这样写<...class="col-lg-8 offest-lg-2">（12-8=4/2=2）

文字排版

默认值

  1. font-size 为 16px
  2. line-height 为 1.5。
  3. font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
  4. <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

  • h1-h6

  • display标题类
    可以让标题h1 更大更粗!

  • small

<div class="container">
  <h1>更小文本标题</h1>
  <p>small 元素用于字号更小的颜色更浅的文本:</p>       
  <h1>h1 标题 <small>副标题</small></h1>
  <h2>h2 标题 <small>副标题</small></h2>
  <h3>h3 标题 <small>副标题</small></h3>
  <h4>h4 标题 <small>副标题</small></h4>
  <h5>h5 标题 <small>副标题</small></h5>
  <h6>h6 标题 <small>副标题</small></h6>
</div>
  • mark高亮文本
<div class="container">
  <h1>高亮文本</h1>    
  <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
</div>

高亮文本

使用 mark 元素来 高亮 文本。

  • abbr
    Bootstrap 4 定义 HTML 元素的样式为显示在文本底部的一条虚线边框
  • blockquote
    对于引用的内容可以在 <blockquote> 上添加 .blockquote 类
<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

在这里插入图片描述

  • dl样式
    在这里插入图片描述
  • code代码段
    可以将一些代码块放入code里面
  • kdd
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>

在这里插入图片描述

  • pre
    可以显示空格
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>

在浏览器下显示

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

更多排版
在这里插入图片描述

颜色

<div class="container">
  <h2>代表指定意义的文本颜色</h2>
  <p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">执行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危险操作文本。</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>

在这里插入图片描述
类似的，有背景颜色

<div class="container">
  <h2>背景颜色</h2>
  <p class="bg-primary text-white">重要的背景颜色。</p>
  <p class="bg-success text-white">执行成功背景颜色。</p>
  <p class="bg-info text-white">信息提示背景颜色。</p>
  <p class="bg-warning text-white">警告背景颜色</p>
  <p class="bg-danger text-white">危险背景颜色。</p>
  <p class="bg-secondary text-white">副标题背景颜色。</p>
  <p class="bg-dark text-white">深灰背景颜色。</p>
  <p class="bg-light text-dark">浅灰背景颜色。</p>
</div>

表格

注意：通过Bootstrap写的表格会自动居中噢

  • .table 类来设置基础表格的样式<table class="table">（还是要在这个.table里面写tr 和td的）
  • 通过添加 .table-striped 类，来设置条纹表格<table class="table table-striped">
  • .table-bordered 类可以为表格添加边框 <table class="table table-bordered">（也只是行与行之间的边框）
  • .table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）<table class="table table-hover">（是一整行的效果嗷 一整行会有悬停效果）
  • .table-dark 类可以为表格添加黑色背景
  • 联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格
  • .table-borderless 类可以设置一个无边框的表格
  • 通过指定意义的颜色类可以为表格的行或者单元格设置颜色
<tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>

在这里插入图片描述
说明：
在这里插入图片描述

  • 表头颜色
    .thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景
  • .table-sm 类用于通过减少内边距来设置较小的表格:
  • .table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）
<div class="table-responsive-sm">
  <table class="table">

在这里插入图片描述

图片形状

  • 圆角图片
    .rounded 类可以让图片显示圆角效果<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

  • 缩略图
    .img-thumbnail 类用于设置图片缩略图(图片有边框)

  • 图片对齐方式
    使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:

  • 图片居中
    使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐`

<img src="paris.jpg" class="mx-auto d-block">
  • 响应式图片
    图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。.img-fluid 类设置了 max-width: 100%; 、 height: auto;
<img class="img-fluid" src="img_chania.jpg" alt="Chania">

提示栏

.alert类
.alert-success,.alert-info,比照上面的颜色，可以设置不同颜色的提示框

提示链接

你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。 </div> ```

关闭提示框
在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。

<button type="button" class="close"
data-dismiss="alert">&times;</button>   <strong>成功!</strong>
指定操作成功提示信息。 </div> ```

提示框动画
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果

 <div class="alert alert-danger alert-dismissible fade show">

按钮

按钮类可用于 <a>, <button>, 或 <input> 元素上:

<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

在这里插入图片描述

按钮设置边框

<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>

在这里插入图片描述

不同大小的按钮

<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>

块级按钮

<button type="button" class="btn btn-primary btn-block">按钮 1</button>

在这里插入图片描述

激活和禁用的按钮
.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。

注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

<button type="button" class="btn btn-primary active">点击后的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>

在这里插入图片描述

加载按钮
.spinner-border是前面那个转动的圈圈
记住是在button下面的span里加嗷
还有文字要写在</span>后面

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
 
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

在这里插入图片描述

按钮组

在div里写 .btn-group 来创建按钮组(与此类似的还有一个列表组）

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

在div里加.btn-gourp btn-group-lg/sm来设置按钮组大小

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

在div里写.btn-group-vertical 垂直按钮

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

内嵌按钮组及下拉表单

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

拆分按钮下拉菜单

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>

垂直按钮组及下拉菜单

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

多个按钮组

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
 
<div class="btn-group">
  <button type="button" class="btn btn-primary">BMW</button>
  <button type="button" class="btn btn-primary">Mercedes</button>
  <button type="button" class="btn btn-primary">Volvo</button>
</div>

徽章

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。
普通样式
例如

 <h1>测试标题 <span class="badge badge-secondary">New</span></h1>

在这里插入图片描述
药丸样式
使用 .badge-pill 类来设置药丸形状徽章:

 <span class="badge badge-pill badge-default">默认</span>

徽章插入到元素内

<button type="button" class="btn btn-primary">
  Messages <span class="badge badge-light">4</span>
</button>

在这里插入图片描述

进度条

在父盒子div里添加.progress
再加一个带有.progress-bar空div，并且命名style=width：70%（进度条的长度）

  1. 默认的父盒子的div高是16px，要想改变高的话可以直接在父盒子的div的style里改
  2. 改进度条颜色，在子盒子里加.bg-success
  3. 进度条条纹：给子盒子加.progress-bar-striped
  4. 动画进度条：给子盒子加.progress-bar-animated

加载效果

.spanner-border是加载的转圈图标，.spanner-grow是闪烁加载图标，用text-success加颜色（text-后面跟颜色）
改大小：用.spinner-border-sm 或 .spinner-grow-sm 类来创建加载效果的大小:

<div class="spinner-border text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-border spinner-border-lg"></div>
  <div class="spinner-grow spinner-grow-sm"></div>

分页

  1. 一般我们用ul 加.pagination
    给li加.pagination-item
    给li里面的a标签加 .pagination-link
  2. 同样的，.pagination-sm/lg来改大小
  3. 显示当前页码状态给li加.active
  4. 还可以设置分页的对齐，默认是左对齐，给li加.justify-content-center表示居中，.justify-content-end是右对齐
  5. 面包屑分页导航，给ul加.breadcrumb，给li加.breadcrumb-item，同样的表示当前页码状态用.active

下面这个就是面包屑导航
在这里插入图片描述

卡片

把图片作为***背景图片*** .card-img-overlay

注意：.card-img-overlay是在一个新盒子里面的，不能写到img的类里面， 再在新盒子里写.card-title
.card-text

<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

下拉菜单

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>
  1. .dropdown-divider 类用于在下拉菜单中创建一个水平的分割线
  2. .dropdown-header 类用于在下拉菜单中添加标题
  3. 同意的，.active和.disable 来定义被选中高亮项和禁用项
  4. 可以加.dropdown-menu-right来给定位
    <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div>
    5. 下拉菜单拉出的方向，给最上面的div加.dropup/dropleft/dropright
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

折叠

.collapse 类用于指定一个折叠元素 ; 点击按钮后会在隐藏与显示之间切换。

控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。
注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性:

<button data-toggle="collapse" data-target="#demo">折叠</button>
 
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
  1. 默认折叠的内容是隐藏的，可以添加.show让它展现
    <div id="demo" class="collapse show">`
  2. 手风琴（注意: 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。）
<div id="accordion">
<div class="card">
  <div class="card-header">
    <a class="card-link" data-toggle="collapse" href="#collapseOne">
      选项一
    </a>
  </div>
  <div id="collapseOne" class="collapse show" data-parent="#accordion">
    <div class="card-body">
      #1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
    选项二
  </a>
  </div>
  <div id="collapseTwo" class="collapse" data-parent="#accordion">
    <div class="card-body">
      #2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
      选项三
    </a>
  </div>
  <div id="collapseThree" class="collapse" data-parent="#accordion">
    <div class="card-body">
      #3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    </div>
  </div>
</div>
</div>`

导航栏

导航栏里用来提亮Logo的.navber-brand 是写在下面的a链接里，不是div里

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">Logo</a>

如果使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏。

`<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">
    <img src="https://static.runoob.com/images/mix/bird.jpg" alt="logo" style="width:40px;">
  </a>

在这里插入图片描述

表单控件

  • text
    首先是一个<form>包含住所有表单
    每个表单栏都是一个div，div里有.form-group,
    然后<lable for="" >用户名</lable> for后面跟下面id一样
    然后<input type=text id="" class=form-control>
  • textarea 跟text类似(不用写input）
  • boxcheck
    也是先有个form大标签
    里面div.form-check
    再lable.form-check-lable
    再input type=“boxcheck” class=form-check-input
    （form里面有lable，lable里面有input）
  1. 一个.form-check里一个选项
  2. 在for-check后面加for-check-inline，可以让选项在一行

这个选项禁用

<div class="form-check disabled">

div.form-check .form-check-inline可以让选项在一行显示

  • radio
    form下面有div.radio 下面有lable（不用class）
    lable下面input type=“radio” name=""
 <form>
    <div class="radio ">
      <label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
    </div>

如果要让单选框横着排
去掉div，form下面直接lable.radio-inline

  • select
    跟text类似
    大form下面一个div.form-group
    下面lable for=id
    下面select.form-control id=
 <form>
    <div class="form-group">
      <label for="sel1">单选下拉菜单:</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>

text，textarea，select的lable里都要写for=id，
单选多选框input里要有name，且name要一样
且！单选多选框的input type是在lable里面
其他的是在lable下面！！！

输入框组

通过输入框组可以给表单添加图片或者文字。
用法：

  1. .input-group来把要加样式的表单框住
  2. .input-group-prepend 可以在表单前面加文本信息；.input-group-append 可以在表单后面添加文本信息
  3. 最后再用.input-gtoup-text来设置文本样式
  4. 同样的，用-sm，-lg可以改变输入框大小
 <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Person</span>
      </div>
      <input type="text" class="form-control" placeholder="First Name">
      <input type="text" class="form-control" placeholder="Last Name">
    </div>  
  </form>
  • 文本样式可以用单选框，复选框来代替
<div class="container mt-3">
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="checkbox"> 
        </div>
      </div>
      <input type="text" class="form-control" placeholder="RUNOOB">
    </div>
  </form>
  
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="radio"> 
        </div>
      </div>
      <input type="text" class="form-control" placeholder="GOOGLE">
    </div>
  </form>
</div>

在输入框组外围设置lable标签，点击标签即可聚焦到输入框。标签的for属性要与输入框的id名一样。

<form>
 <label for="demo">Write your email here:</label>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
  <div class="input-group-append">
    <span class="input-group-text">@runoob.com</span>
  </div>
</div>
</form>

轮播

在一个大div里分别设置 指示符，轮播图片，左右切换键

 <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
</head>
<body>

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

</body>
</html>

上面类的解释
在这里插入图片描述

 <style>
  body {
      position: relative; 
  }
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Section 3</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Section 4
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#section41">Link 1</a>
        <a class="dropdown-item" href="#section42">Link 2</a>
      </div>
    </li>
  </ul>
</nav>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

</body>
</html>

模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

<div class="container">
  <h2>模态框实例</h2>
  <!-- 按钮：用于打开模态框 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
  </button>
   
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框内容..
        </div>
   
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
   
      </div>
    </div>
  </div>
  
</div>

同样的，我们可以设置模态框大小
我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。尺寸类放在 <div>元素的 .modal-dialog 类后。

<div class="modal-dialog modal-sm">

多媒体对象

Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:

要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:

<div class="media border p-3">
  <img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-body">
    <h4>菜鸟教程</h4>
    <p>学的不仅是技术，更是梦想！！！</p>
  </div>
</div>

在这里插入图片描述

  • 多媒体嵌套
    把新的.media放到上一个media-body中
<div class="media border p-3">
  <img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-body">
    <h4>菜鸟教程</h4>
    <p>学的不仅是技术，更是梦想！！！</p>
    <div class="media p-3">
      <img src="mobile-icon.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
      <div class="media-body">
        <h4>菜鸟教程</h4>
        <p>学的不仅是技术，更是梦想！！！</p>
      </div>
    </div>  
  </div>
</div>

在这里插入图片描述

  • 定位多媒体对象
    给多媒体对象图片添加.align-self-start/center/end
<!-- 头部 -->
<div class="media">
  <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-start mr-3" style="width:60px">
  <div class="media-body">
    <h4>头部 -- 菜鸟教程</h4>
    <p>学的不仅是技术，更是梦想！！！</p>
  </div>
</div>
 
<!-- 居中 -->
<div class="media">
  <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-center mr-3" style="width:60px">
  <div class="media-body">
    <h4>居中 -- 菜鸟教程</h4>
    <p>学的不仅是技术，更是梦想！！！</p>
  </div>
</div>
 
<!-- 底部 -->
<div class="media">
  <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-end mr-3" style="width:60px">
  <div class="media-body">
    <h4>底部 -- 菜鸟教程</h4>
    <p>学的不仅是技术，更是梦想！！！</p>
  </div>
</div>

flex布局

  1. 创建 用.d-flex来创建一个flex
  2. 水平显示 用. d-inline-flex显示在同一行
  3. 水平方向 .flex-row 可以设置弹性子元素水平显示，这是默认的。
    使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
 
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

在这里插入图片描述

4.垂直显示 .flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素
5.内容排列 .justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

在这里插入图片描述

  1. .align-content-* 来控制在 垂直方向 上如何去堆叠子元素。同上在水平方向上。
  2. 如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制
    区别一下
    在这里插入图片描述
    这个是.justify-content-end
    在这里插入图片描述
  1. 等宽
    .flex-fill 类强制设置各个弹性子元素的宽度是一样的
<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Flex item 1</div>
  <div class="p-2 bg-warning flex-fill">Flex item 2</div>
  <div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
  1. 扩展
    .flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。
<div class="d-flex">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>

在这里插入图片描述
8. 排序
.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前)
9. 外边距
.mr-auto 类可以设置子元素右外边距为 auto .ml-auto可以设置子元素左边距为auto

<div class="d-flex mb-3 bg-secondary">
    <div class="p-2 mr-auto bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex mb-3 bg-secondary">
    <div class="p-2  bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 ml-auto bg-primary">Flex item 3</div>
  </div>

在这里插入图片描述
10. 包裹
.flex-wrap可以包裹子元素，默认是.flex-nowrap，还有.flex-wrap-reverse，可实现响应式。

bounceii
关注
  • 5
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Bootstrap基础学习—表单
wangkaiming123456的专栏
11-22 105
bootstrap
bootstrap教程（一）———bootstrap标题（一）
zhanyingguo的博客
07-18 663
本文为H5EDU机构官方的HTML5培训教程 bootstrap教程(一)。  我们首先要下载bootstrap的框架文件，放到我们的项目目录当中。 然后将bootstrap框架当中的bootstrap.css文件引入到项目当中。 之后我们可以看，在bootstrap当中的标题与我们没用使用框架的文件是有不同之处的。 最明显的是文字变细。 bootstrap标题一
【bootstrap】bootstrap-4.5.0-example 各个模板展示
tyrantForever的博客
07-09 1519
前言：博主做前端开发的时候经常用到bootstrap，但挑选模板的时候，需要一个一个的打开文件夹、打开html文件再查看模板是否合适，这样实在有点浪费时间，所以今天博主将各个页面截图，之后挑选模板的时候会省不少时间 1、album ...
BootStrap官方的example下载
柒月学习小基地
01-03 964
官网的例子素材 BootStrap官网是有一些好看的模板的，但是只能点击预览不能下载，如图： 下载example的方法是到Github直接下载 BootStrap的Github地址： https://github.com/twbs/bootstrap/tree/master example 的路径是site/content/docs/[version]/examples/ 其中的 [version] 替换成指定的版本 当前最新版本是5.0，对应的example地址是： https://github.com/
BootStrap详解
weixin_45845391的博客
04-27 1401
Bootstrap简介 什么是BootStrap？ BootStrap来自Twitter，是目前最受欢迎的响应式前端框 Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷 为什么使用Bootstrap？ 移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库移动设备优先的样式。 - 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中 - 也就是说，针对移动设备的样式融合进了框架的每个角度，而不是增加一个额外的文件
【bootstrap】bootstrap布局范例--20220917
Season CSDN博客
09-17 1098
bootstrap官方推荐
bootstrap 表格怎么把纵向展示的变成横向的呢？
热门推荐
马金波
07-31 1万+
使用bootstrap 布局，展示的效果竟然是纵向的，想要横向怎么弄呢？ 跟table 加一个样式限制就可以了： style=&quot;text-overflow: ellipsis; #文本溢出会截断处理，末尾上加... white-space: nowrap; #表示不换行 overflow: hidden;&quot;; #内容会被修剪，并且其余内容是不可...
css 动态rem_CSS响应式布局
weixin_39849894的博客
11-21 223
设置meta标签中 name="viewport"设置视图标签(viewport)来告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Media Queries 媒体查询媒体查...
bootstrap模板
最新发布
06-07
通过这两个文档，开发者不仅可以学习到Bootstrap的基础知识，还能了解到一个具体模板的使用方法，从而更高效地进行网页开发。Bootstrap因其易用性和强大的功能，在全球范围内广受欢迎，无论是初学者还是经验丰富的...
23.0 Bootstrap 框架1
10-06
在这个"23.0 Bootstrap 框架1"的主题中，我们将深入探讨Bootstrap的基础知识和核心组件。 首先，Bootstrap的核心特性包括响应式布局和移动优先的设计哲学。这意味着，无论用户在什么设备上访问网站——无论是桌面...
bootstrap动态表格模板
09-23
首先，我们来了解一下Bootstrap表格的基础知识。Bootstrap的表格设计简洁、清晰，支持各种类型的表格样式，如 striped（斑马纹）、hover（鼠标悬停高亮）和bordered（带边框）。通过简单的HTML标记和类名，可以轻松...
Booststrap-example:使用Bootstrap开发网站布局
05-09
Booststrap示例
一份bootstrap框架期末作业，请注意查收
06-17
在使用Bootstrap时，首先要理解其核心理念——网格系统。Bootstrap的网格系统是基于行(row)和列(column)构建的，通过预定义的类，我们可以轻松创建多列布局，适应不同屏幕尺寸，实现自适应显示。在codeTower文件中，...
Bootstrap模板
10-29
在给定的压缩包文件中，包含的四个模板——moban3527、moban2897、moban3352、moban3492，都是基于Bootstrap3版本的后台管理模板，这些模板通常用于构建企业级的后台管理系统，具有高效、美观和易用的特点。...
div同行显示_DIV横向排列_CSS如何让多个div盒子并排同行显示
weixin_30543595的博客
12-23 1159
注：如果下面这些不能实现需要，直接用bootstrap的栅格布局，来设置列的布局。---------------------------------------------------------------------如何让多个div盒子并排同行div横向排列显示呢？我们先设置3个div盒子对象，什么css样式都不设置看看效果。代码如下：三个div盒子均独占一行显示div盒子本身默认样式属性是独...
bootstrap treeview基本用法+横向显示
weixin_37778355的博客
09-14 1818
bootstrap treeview不能水平显示节点，该怎么办呢；个性化样式怎么实现呢；
使用Bootstrap激活或禁用按钮要如何操作？
LuckXinXin的博客
07-10 1179
激活按钮：给按钮增加.active的class 禁用按钮：给按钮增加disabled="disabled"的属性
Bootstrap 入门
我的的博客哦
05-08 2892
🔰框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。🔰前端常用的框架有 Bootstrap、Vue、Angular、React 等，既能开发 PC 端，也能开发移动端。🔰Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。
Bootstrap基础知识
li_peng_yuan的博客
11-14 5138
1 、什么是 Bootstrap? Bootstrap 的作用是什么? ​ Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架. ​ 该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效) ​ 开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现. ​ 作用: Bootstrap 使得 Web 开发更加快捷、 高效. Bootstrap 支持响应式开发, 解决了移动
精通Bootstrap：构建响应式网页设计
8. Bootstrap技术中心——强大的Bootstrap工具一站式商店 通过这本书，读者将能够构建一个功能强大且时尚的电子商务网站，从而实践Bootstrap的应用。Bootstrap作为一款强大的前端框架，其响应式设计、预设的样式和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值