BootStrap4：组件

编程语言 2023-12-17 13:29:33 阅读次数: 0

一、按钮

1.1、普通按钮

Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>
</body>

1.2、轮廓按钮

.btn 在引用中，实现轮廓按钮可以用默认修饰符类替换.btn-outline-*任何按钮上的所有背景颜色和图像。

样式效果：

在这里插入图片描述

源代码：

<body class="container">
    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button> 
    <button type="button" class="btn btn-outline-success">Success</button> 
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>
</body>

1.3、按钮组

1.3.1、水平按钮组

使用按钮组合，可以把一系列按钮编组在一行里，将一系列的 .btn 包裹在.btn-group内。

样式效果：

在这里插入图片描述

源代码：

<body class="container">
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary">Left</button>
        <button type="button" class="btn btn-secondary">Middle</button>
        <button type="button" class="btn btn-secondary">Right</button>
    </div>
</body>

1.3.2、垂直按钮组

添加.btn-group-vertical 将一组按钮垂直排列 。

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <div class="btn-group-vertical" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary">Top</button>
        <button type="button" class="btn btn-secondary">Middle</button>
        <button type="button" class="btn btn-secondary">Bottom</button>
    </div>
</body>

二、卡片

2.1、普通卡片

.card卡片组件是BootStrap 4新增的一组重要样式，它是一一个灵活的、可扩展的内容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。

  • .card-body：可以建立起卡片的内容主体，如果你需要在一个.card中装置带边框的内容时，可以使用它
  • .card-title和 <h*>组合：添加卡片标题
  • .card-link 与 结合：可以方便添加平行的链接
  • .card-subtitle 和 <h*> 结合：可以添加副标题
  • .card-img-top：定义一张图片在卡片的顶部 。

Ps：如果 .card-title 和 .card-subtitle 组合放在 .card-body 中, 则可对齐主、副标题。

card-body效果
在这里插入图片描述

card-body源代码

<div class="card"> 
    <div class="card-body"> This is some text within a card body. </div> 
</div>

card-title与card-link效果：
在这里插入图片描述

card-title与card-link源代码：

<body class="container">
    <div class="card" style="width: 18rem;">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
        </div>
    </div>
</body>

card-img-top效果：
在这里插入图片描述

源代码：

<body class="container">
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
            </p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</body>

2.2、列表组卡片

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <div class="card" style="width: 18rem;">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Vestibulum at eros</li>
        </ul>
    </div>
</body>

2.3、带页眉页脚的卡片

  • .card-header：页眉
  • .card-footer：页脚

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <div class="card">
        <div class="card-header"> Featured </div>
        <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>

        </div>
        <div class="card-footer">
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</body>

三、表单组件

文本控件（如 <input>、<select>、 <textarea>）统一采用 .form-control 样式进行处理优化，包括常规外观、focus选（点）中状态、尺寸大小等。

3.1、复选框和单选按钮

  • .form-check：格式化复选框和单选框按钮
  • form-check-inline：强制水平布局

垂直布局样式效果：
在这里插入图片描述

垂直布局源代码：

<body class="container">
    <div class="form-check">
        <input class="form-check-input"  type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label"  for="defaultCheck1">
            Option one is this and that—be sure to include why it's great
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input"  type="checkbox" value="" id="defaultCheck2">
        <label class="form-check-label"  for="defaultCheck2">
            Option one is this and that—be sure to include why it's great
        </label>
    </div>
</body>

水平布局样式：
在这里插入图片描述

水平布局源代码：

<body class="container">
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">拿铁</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
        <label class="form-check-label" for="inlineCheckbox2">摩卡</label>
    </div>
</body>

3.2、表单组

.form-group 群组可以向为表单赋予一些结构样式，其唯一目的是提供标签的控制配对以及margin-bottom 属性，可以在<fieldset>、 <div>或任何其它元素中使用它。

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
    </div>
    <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
    </div>
</body>

3.3、内联式表单

使用 .form-inline样式在单个水平行上显示一系列标签，表单控件和按钮。

效果：
在这里插入图片描述

源代码：

<form class="form-inline"> 
     <label class="sr-only" for="inlineFormInputName2">Name</label>
     <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
     <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label> 
      ……
</form>

3.4、表单下方帮助提示文本

可以使用…form-text t创建表单中的块级帮助文本。

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <label for="inputPassword5">Password</label>
    <input type="password" id="inputPassword5" class="form-control" aria-escribedby="passwordHelpBlock">
    <small id="passwordHelpBlock" class="form-text text-muted">
        Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
    </small>
</body>

内联式效果：
在这里插入图片描述

源代码：

<body class="container">
<form class="form-inline">
    <div class="form-group">
        <label for="inputPassword6">Password</label>
        <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-
               describedby="passwordHelpInline">
        <small id="passwordHelpInline" class="text-muted"> Must be 8-20 characters long.
        </small>
    </div>
</form>
</body>

四、列表与导航

4.1、状态指示列表组

添加 .active 到 .list-group-item 下的其中一行或多行，以指示当前有效的选择状态。

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <ul class="list-group">
        <li class="list-group-item active">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
</body>

4.2、无边框的列表

加入.list-group-flush选择器，可以实现移除部分边框以及圆角，从而产生边缘贴齐的列表组

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <ul class="list-group list-group-flush">
        <li class="list-group-item  ">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
</body>

4.3、通用导航

Bootstrap中提供的导航可共享通用标记和样式，从基础.nav样式类到活动与禁用状态

  • .justify-content-center：可以让导航水平居中显示
  • .justify-content-end：右对齐
  • .flex-column：导航垂直排列

水平排列样式效果：
在这里插入图片描述

水平排列源代码：

<body class="container">
    <ul class="nav justify-content-center">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</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>
</body>

垂直排列样式效果：
在这里插入图片描述

垂直排列源代码：

<body class="container">
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</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>
</body>

4.4、选项卡样式导航

  • nav-tabs：选项卡样式导航

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</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>
</body>

4.5、胶囊样式导航

  • nav-pills：胶囊样式导航

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</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>
</body>

4.6、等比导航

使用.nav-fill会将 .nav-item按照比例分配空间

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</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>
</body>

4.7、带标题的导航

.navbar-brand：为您的公司，产品或项目名称。
.justify-content-end ：设置导航在右侧

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class=“container”>
            <a class="navbar-brand" href="#">BEN的博客</a>
            <div>
                <ul class="navbar-nav" >
                    <li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">BEN的博客</a>
            <div class="justify-content-end">
                <ul class="navbar-nav" >
                    <li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

4.8、定位导航栏

  • . fixed-top：固定在顶部
  • . fixed-bottom：固定在底部

固定在顶部的样式效果：
在这里插入图片描述

固定在顶部的源代码：

<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">BEN的博客</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navList">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="justify-content-end collapse navbar-collapse" id="navList" >
            <div class="justify-content-end collapse navbar-collapse">
                <ul class="navbar-nav" >
                    <li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
</body>

固定在底部的样式：
在这里插入图片描述

固定在底部的源代码：

<body>
<nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">BEN的博客</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navList">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="justify-content-end collapse navbar-collapse" id="navList" >
            <div class="justify-content-end collapse navbar-collapse">
                <ul class="navbar-nav" >
                    <li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li>
                    <li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
</body>

猜你喜欢

转载自blog.csdn.net/qzc70919700/article/details/129829533
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022