BootStrap4：组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了BootStrap4：组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、按钮

1.1、普通按钮

Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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-*任何按钮上的所有背景颜色和图像。

样式效果：

bootstrap4,bootstrap,前端,html

源代码：

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

样式效果：

bootstrap4,bootstrap,前端,html

源代码：

<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 将一组按钮垂直排列。

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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效果
bootstrap4,bootstrap,前端,html

card-body源代码

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

card-title与card-link效果：
bootstrap4,bootstrap,前端,html

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效果：
bootstrap4,bootstrap,前端,html

源代码：

<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、列表组卡片

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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：页脚

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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：强制水平布局

垂直布局样式效果：
bootstrap4,bootstrap,前端,html

垂直布局源代码：

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

水平布局样式：
bootstrap4,bootstrap,前端,html

水平布局源代码：

<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>或任何其它元素中使用它。

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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样式在单个水平行上显示一系列标签，表单控件和按钮。

效果：
bootstrap4,bootstrap,前端,html

源代码：

<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创建表单中的块级帮助文本。

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

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

内联式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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 下的其中一行或多行，以指示当前有效的选择状态。

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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选择器，可以实现移除部分边框以及圆角，从而产生边缘贴齐的列表组

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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：导航垂直排列

水平排列样式效果：
bootstrap4,bootstrap,前端,html

水平排列源代码：

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

垂直排列样式效果：
bootstrap4,bootstrap,前端,html

垂直排列源代码：

<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：选项卡样式导航

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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：胶囊样式导航

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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按照比例分配空间

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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 ：设置导航在右侧

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

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

样式效果：
bootstrap4,bootstrap,前端,html

源代码：

<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：固定在底部

固定在顶部的样式效果：
bootstrap4,bootstrap,前端,html

固定在顶部的源代码：

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

固定在底部的样式：
bootstrap4,bootstrap,前端,html

固定在底部的源代码：文章来源地址https://www.toymoban.com/news/detail-769505.html

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