Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮

最新推荐文章于 2024-04-28 17:46:18 发布

旺仔好吃糖er

最新推荐文章于 2024-04-28 17:46:18 发布

阅读量1.2k

点赞数 5

分类专栏：笔记 bootstrap 文章标签： css css3 前端 bootstrap

本文链接：https://blog.csdn.net/m0_63338686/article/details/121415315

版权

笔记同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

Bootstrap4

1.网络系统

规则

屏幕最多分为12列（同一行数字相加应为12）
用行来创建水平的列组
为自动设置外边距内边距，需将网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

在这里插入图片描述

5大网络类：

col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
如：

<div class="row">
      <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success">
        RUNOOB
      </div>
      <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning">
        菜鸟教程
      </div>
    </div>

在这里插入图片描述
偏移列：

同一个div中后面一个是在前面一个的基础位置上偏移

<div class="container-fluid">
    <div class="row">
      <div class="col-md-4 bg-success">.col-md-4</div>
      <div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div>
      <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div>
    </div>
    <div class="row">
      <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div>
    </div>
  </div>

即：
在这里插入图片描述
偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
2.图像形状

.rounded类让图片有圆角
.rounded-circle类椭圆形图片
.img-thumbnail 类用于设置图片缩略图即图片有边框
float-right float-left 图片对齐
.mx-auto (margin:auto) 和 .d-block (display:block) 类设置图片居中对齐
.img-fluid类（max-width: 100%; 、 height: auto;）根据屏幕大小自动调节

3.轮播（carousel）
提示符

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

class=“carousel slide”---- 整个div是轮播，轮播动画方式是slide
在这里插入图片描述
data-ride=“carousel”----页面加载就开始轮播，如果删除就不会轮播
class=“active”----当前位置
data-slide-to=“2”---- 轮播的位置，将小长方形移到第二块，索引从0开始
 .carousel-indicators----代表轮播时候的指标（就是一列小长方形）轮播时可显示目前是第几张图。
在这里插入图片描述

轮播图片

<!-- 轮播图片 -->
  <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>

.carousel-inner----添加要切换的图片
.carousel-item----指定每个图片的内容
class=“carousel-item active”----轮播的第一张图，，，，两个active会卡住只能一个div有一个active

在每个 <div class="carousel-item">内添加 <div class="carousel-caption">来设置轮播图片的描述文本``

<div class="carousel-item">
  <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
  <div class="carousel-caption">
    <h3>第一张图片描述标题</h3>
    <p>描述文字!</p>
  </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>

.carousel-control-prve----添加左侧按钮
.carousel-control-next—添加右侧按钮
.carousel-control-prev-icon----与 .carousel-control-prev 一起使用，设置左侧的按钮
.carousel-control-next-icon----与 .carousel-control-next 一起使用，设置右侧的按钮在这里插入图片描述

4.滚动监听(scrollspy)：内容跟随滚动条而滚动
方法：

首先要确定监听对象一般为body,所以给其设置相对定位position-relative,为实现滚动监听要添加data-spy="scroll",然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)
其次，创建导航栏(导航栏和滚动内容在同一个div中)可滚动项元素上的 id (<div id="section1"> )必须匹配导航栏上的链接选项（<a href="#section1">)

可在导航栏中设置下拉菜单，于此同时，滚动内容也可随之变为对应的多个部分

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

在这里插入图片描述

5.下拉菜单
指定下拉菜单：.dropdown类
大体方法：在这里插入图片描述
如下例子：

<div class="container">
	<div class="dropdown">
	  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropdown link
	  </a>

	  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
	  </div>
	</div>
</div>

在这里插入图片描述
分割线:将其中的<a>前重新放入入一个新盒子中并在该<div>中添加.dropdown-divider 类来创建分割线

<div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Another link</a>

在这里插入图片描述
标题：用.dropdown-header来添加标题

     <a class="dropdown-item" href="#">Link 3</a>
      <h5 class="dropdown-header">Dropdown header</h5>
      <a class="dropdown-item" href="#">Another link</a>

在这里插入图片描述
下拉菜单弹出方向：在总<div>中添加(默认弹出方向为下)

右弹出:.dropright类
左弹出：.dropleft类
上弹出：.dropup类

定位：在元素 .dropdown-menu 类后添加.dropdown-menu-right类----右对齐
禁用、高亮选项在子元素中添加.disabled类为禁用选项，添加.active类高亮（蓝色背景）

在这里插入图片描述

6.导航

在<ul>元素上添加.nav类，在每个<li>选项上添加.nav-item类，在每个链接上添加.nav-link类可创建简单的水平导航栏

<div class="container">
  <h2>导航</h2>
  <p>简单的水平导航:</p>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

上述其中disabled为禁选 在这里插入图片描述
居中对齐：在<ul>中添加.justify-content-center类
导航右对齐：在<ul>中添加.justify-content-end类
垂直导航：在<ul>中添加.flex-column类

选项卡:在<ul>中添加<.nav-tabs>类,然后对所选中的选项用.active类来标记
动态选项卡(选项卡动态可切换):
在每个链接上添加 data-toggle=“tab” 属性。然后在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡内容的 div 元素使用 .tab-content 类。淡入效果可以在 .tab-pane 后添加 .fade类:

<li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>

    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>

在这里插入图片描述

胶囊导航：在<ul>中添加.nav-pills类
齐行等宽：添加.nav-justified类

7.导航栏一般在页面顶部

大体方法：要先创建一个导航栏.navbar类，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠，可通过删除此类来创建垂直导航栏)，然后创建导航栏选项即在<ul>元素中添加.navbar-nav类，在<li>元素上添加.nav-item类，<a>元素上使用.nav-link类

<nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

即
在这里插入图片描述
品牌/Logo:在<a>元素中添加.navbar-brand类高亮显示

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">Logo</a>
  
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>

在这里插入图片描述
固定导航栏:.fixed-top类----页面头部、.fixed-bottom类----页面底部
折叠导航栏：点击来显示导航栏

创建折叠导航栏：在按钮上添加class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget"类，然后在设置了class="collapse navbar-collapse" 类的div上包裹包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id:

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

在这里插入图片描述
导航栏文本:.navbar-text类来设置非链接文本，水平对齐，颜色与内边距一样

  </ul>
  <!-- Navbar text-->
  <span class="navbar-text">
    Navbar text
  </span>
</nav>

在这里插入图片描述
8.多媒体对象
创建：在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:
基础多媒体对象：

<div class="media border p-3">
    <img src="https://static.runoob.com/images/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>

在这里插入图片描述
多媒体对象嵌套：一个多媒体对象中包含另外一个多媒体对象


<div class="container mt-3">
  <h2>多媒体对象嵌套</h2>
  <p>多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）:</p><br>
  <div class="media border p-3">
    <img src="https://static.runoob.com/images/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="https://static.runoob.com/images/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>
</div>

在这里插入图片描述

在.media-boby容器后添加图片，头像图片显示在右侧，若要让其在左侧，则相反

.align-self-*相关类：设置多媒体对象的图片显示位置

align-self-start:头部
align-self-center:居中
align-end:底部

9.按钮组：在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>

在这里插入图片描述

btn-group-vertical设置垂直按钮组
.btn-group-lg/sm设置按钮组大小

内嵌按钮组：将要嵌入下拉菜单的按钮放入一个div，并在该div中添加.btn-group类，然后在该div加入第二层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>

在这里插入图片描述

旺仔好吃糖er

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮

Bootstrap4网络系统：屏幕最多分为12列创建一行(<div class=“row”)。然后，添加需要的列( .col-- 类中设置)。第一个星号 () 表示响应的设备: sm, md, lg 或 xl, 第二个星号 () 表示一个数字, 同一行的数字相加为 12不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等：两个 “col” ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25%
复制链接

扫一扫