Bootstrap-css组件

最新推荐文章于 2024-10-09 09:00:00 发布
最新推荐文章于 2024-10-09 09:00:00 发布
阅读量448 收藏 2
点赞数
文章标签： css bootstrap html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leona__/article/details/121049506
版权
本文详细介绍了Bootstrap中的CSS组件，包括小图标、按钮组、输入框组、下拉菜单、导航和导航条，以及缩略图、媒体对象、列表组和分页导航等。每个组件都提供了相应的类名、示例和样式说明，帮助开发者理解和应用Bootstrap框架。
摘要由CSDN通过智能技术生成

小图标

类名：
glyphicon glyphicon-样式
样式：
通过CSS设置字体大小和颜色设置

示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        span:nth-child(2) {
            color: red;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <span class="glyphicon glyphicon-home"></span>
    <span class="glyphicon glyphicon-phone"></span>
</body>

</html>

样式如下
在这里插入图片描述

按钮组

类名
btn-group
示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">

</head>

<body>
<!-- 普通按钮 -->
    <button class="btn btn-default">按钮1</button>
    <button class="btn btn-info">按钮2</button>
    <button class="btn btn-primary">按钮3</button>
    </br>
    </br>
    </br>
 <!-- 按钮组 -->
    <div class="btn-group">
        <button class="btn btn-default">按钮1</button>
        <button class="btn btn-info">按钮2</button>
        <button class="btn btn-primary">按钮3</button>
    </div>
</body>

</html>

样式如下：
在这里插入图片描述

输入框组

类名

目标格式布局类名
div（父元素）input-group
spaninput-group-addon
inputform-control
buttoninput-group-btn

类名

目标样式类名
div（父元素）input-group-lg
div（父元素）input-group-sm

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">

</head>

<body>
    <div class="input-group col-xs-5">
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-warning ">按钮</button>
        </span>
    </div>
</body>

</html>

样式如下
在这里插入图片描述

下拉菜单

类名

目标类名/属性高
div(父元素)dropdown/dropup/btn-group
点击的部分data-toggle="dropdown"caret(向下箭头)
下拉菜单项dropdown-menuactive(默认选中)divider(分割线)

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">

</head>

<body>
    <div class="btn-group">
        <button class="btn btn-primary">下拉菜单</button>
        <button class="btn btn-primary" data-toggle="dropdown"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>

</html>
<script src="/jquery-3.6.0.min.js"></script>
<script src="/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

样式如下
在这里插入图片描述

导航和导航条

1.导航（ul>li>a）

选项卡式
类名：nav nav-tabs
胶囊式
类名：nav nav-pills
标签自适应宽度
类名：nav nav-tabs/pills nav-justified
二级导航
嵌套下拉菜单

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">

</head>

<body>

    <ul class="nav nav-tabs">
        <li class="active"><a href="">选项一</a></li>
        <li><a href="">选项二</a></li>
        <li><a href="">选项三</a></li>
    </ul>

    <br>
    <br>

    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="">选项一</a></li>
        <li><a href="">选项二</a></li>
        <li><a href="">选项三</a></li>
    </ul>

    <br>
    <br>

    <ul class="nav nav-pills">
        <li class="active"><a href="">选项一</a></li>
        <li><a href="">选项二</a></li>
        <li><a href="">选项三</a></li>
    </ul>
</body>

</html>

样式如下
在这里插入图片描述

2.导航条(div>div/ul>li>a)

div
系统样式：navbar navbar-default
反色样式：navbar navbar-inverse
固定定位：navbar-fixed-top/navbar-fixed-bottom
定位随滚动条滑动：navbar-static-top/navbar-static-bottom
div>div
1.图片头部；
2.文字头部：navbar-header
2-1:div>div>a:navbar-brand
div>ul(导航条内导航)
navbar navbar-nav
div>文本
navbar-text
div>链接
navbar-link
div>表单
navbar-form
div>按钮
navbar-btn
导航条内元素对齐方式
navbar-left
navbar-right
pull-right

3.响应式导航条

缩小后小按钮
类：navbar-toggle
属性：data-toggle=“collapse”;data-target="#/."
缩小后隐藏部分
类：collapse navbar-collapse
id/class

缩略图

类名：
thumbail
内容：
1.图片
2.文字：caption
注意
可配合12栅格系统使用
示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">

</head>

<body>
    <div class="thumbnail col-xs-4">
        <img src="/img/1.jpg" alt="">
        <div class="caption">
            <p>缩略图1</p>
        </div>
    </div>
    <div class="thumbnail col-xs-4">
        <img src="/img/2.jpg" alt="">
        <div class="caption">
            <p>缩略图2</p>
        </div>
    </div>
    <div class="thumbnail col-xs-4">
        <img src="/img/3.jpg" alt="">
        <div class="caption">
            <p>缩略图3</p>
        </div>
    </div>
</body>

</html>

样式如下
在这里插入图片描述

媒体对象

类名

目标类名
div(父元素)media
div(头部)media-left/media-right
div(头部)-imgmedia-object
div(文字部分)media-body
div(文字部分)-标题media-heading

注意
还可配合12栅格使用
示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">

</head>

<body>
    <div class="media">
        <div class="media-left">
            <img src="/img/1.jpg" class="media-object">
        </div>
        <div class="media-body">
            <h3 class="media-heading">标题</h3>
            <p>正文</p>
        </div>
    </div>
    <div class="media">
        <div class="media-body text-right">
            <h3 class="media-heading">标题</h3>
            <p>正文</p>
        </div>
        <div class="media-right">
            <img src="/img/2.jpg" class="media-object">
        </div>
    </div>
</body>

</html>
<script src="/jquery-3.6.0.min.js"></script>
<script src="/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

样式如下
在这里插入图片描述

列表组

类名

目标类名
ullist-group
lilist-group-item
lilist-group-item-danger(红色)/list-group-item-info(浅蓝色)…
lilist-group-item-heading
li>spanbadge

注意
还可配合12栅格使用
示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">

</head>

<body>
    <ul class="list-group col-xs-6">
        <li class="list-group-item active list-group-item-heading">
            第一个
        </li>
        <li class="list-group-item">
            第二个
        </li>
        <li class="list-group-item list-group-item-success">
            第三个
        </li>
        <li class="list-group-item list-group-item-info">
            第四个
            <span class="badge">1</span>
        </li>
    </ul>
</body>

</html>
<script src="/jquery-3.6.0.min.js"></script>
<script src="/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

样式如下
在这里插入图片描述

分页导航(ul>li>a)

分页

类名
ul:pagination

翻页

普通模式类名
ul:pager
分散模式类名
ul:pager
上一页li:previous
下一页li:next

li通用样式

禁用：disabled
默认选中：active
示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">

</head>

<body>
    <ul class="pagination">
        <li class="disabled"><a href="#">首页</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">最后一页</a></li>
    </ul>

    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>
    </ul>

    <ul class="pager">
        <li class="previous"><a href="#">上一页</a></li>
        <li class="next"><a href="#">下一页</a></li>
    </ul>
</body>

</html>
<script src="/jquery-3.6.0.min.js"></script>
<script src="/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

样式如下
在这里插入图片描述

今天的分享就是这些啦，欢迎正在学习web的伙伴们“挑毛病”“提意见”，当然了也欢迎各种表扬奥～（比心，比心）
Leona__
关注
BootStrap--CSS组件--输入框组(input-group)
王欢的博客
12-16 2万+
了解table-cell的表格width设置为1%的原因。http://www.tuicool.com/articles/VzUVfyi 通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。input-group(input-group-xs,input-group-sm,in
bootstrap-datetimepicker时间组件
08-19
Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择组件，它提供了美观、易用的用户界面，用于在网页上方便地选择日期和时间。该组件适用于Bootstrap的2、3、4三个主要版本，确保了与不同Bootstrap设计...
Bootstrap CSS组件
热门推荐
WEN38306482的博客
11-20 19万+
一，使用图标组件 如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。 <span class="glyphicon glyphicon-search"></span> 使用简单，需要哪个图标就引用对应的类即可。 设置图标组件大小，font-size即可。 二，使用下拉菜单组件 下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。 <div class="dropdown"> <button type="button" clas
前端必知必会-Bootstrap 5 下拉菜单
最新发布
qq_24018193的博客
10-09 1099
本文介绍了Bootstrap 5 下拉菜单的使用，如有问题欢迎私信和评论。
Bootstrap中CSS组件总结（上）
qq_41985570的博客
08-28 1885
正确使用CSS组件 因为Bootstrap使用的某些HTML和CSS需要的文档类型为HTML5 doctype，所以要创建html5文档，以确保CSS组件能够正确使用。然后在&lt;head&gt;里引入jquery.js、bootstrap.js、bootstrap.css文件。接下来总结一下Bootstrap的一些常用组件及其使用方法： 一、下拉菜单 定义：下拉菜单组件必须包含在drop...
Bootstrap中CSS组件总结（下）
qq_41985570的博客
08-28 933
六、面包屑 定义：面包屑组件类似于树杈分支导航，从网站首页逐级导航到详细页，使用breadcrumb类样式，可以把列表结构设计成面包屑导航样式。 基本结构： &lt;ul class="breadcrumb"&gt; &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a h
bootstrap——css样式（三、表格）
zaichuanguanshui的专栏
01-18 1141
1、.table 为任意 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。.table { width: 100%; max-width: 100%; margin-bottom: 20px; } td { padding: 8px; line-height: 1.42857143; verti
bootstrap-css-interview-questions:100多个Bootstrap-CSS面试问题
05-12
Bootstrap-CSS面试问题 点击 如果您喜欢这个项目。 提取请求受到高度赞赏。 问：什么是Bootstrap？ Bootstrap是一个HTML，CSS和JS框架，用于以最少的精力构建富Web应用程序。 该框架更多地侧重于构建移动Web应用...
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
Bootstrap 3的核心组件包括网格系统、表单、按钮、导航、模态、图像以及各种JavaScript插件，如下拉菜单、轮播图和模态框等。这些组件都基于HTML5和CSS3，通过预定义的类名，开发者可以快速构建美观的用户界面。 ...
bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例
12-06
Bootstrap Table 是一个基于Bootstrap框架的开源前端组件，用于创建功能丰富的、响应式的表格。它提供了很多高级特性，如排序、过滤、分页、列切换等。在本话题中，我们聚焦于Bootstrap Table的一个扩展功能——可...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5本身是一个流行的前端框架，它提供了组件化的设计、响应式的布局以及易用的JavaScript插件，帮助开发者快速构建现代网页应用。而bootstrap-icons则扩展了这个框架的功能，提供了图标支持，使得开发者在不...
转：Bootstrap的常用类(CSS和布局组件)的总结
qx1995318的博客
07-25 1165
原文地址：点击打开链接 Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签 网格选项 row :行 col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数]) col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左
Bootstrap CSS
qq_53694927的博客
08-24 496
Bootstrap CSS
前端基础之《Bootstrap（7）—CSS组件_输入框组和导航》
csj50的专栏
11-04 461
2、为input添加额外元素（.input-group-addon）3、input-group大尺寸（.input-group-lg）4、input-group小尺寸（.input-group-sm）5、为输入框组添加按钮（.input-group-btn）1、输入框组（.input-group）
【收藏】这么多WEB组件(CSS)，攒一个网站够了吧？
weixin_34198583的博客
03-29 132
1 表单(form)相关 1.1 输入框(input) 一个简单的输入框样式，简捷又不夸张。需要约30行的CSS代码。 演示程序 1.2 单选多选框(checkbox,radio) 浏览器内置的checkbox及radio样式效果太差，本例展示了一个简单大方的单选多选框样式。需要约25行的CSS代码，额外需要搭配三个png小图标。 演示程序 1.3 选择框(select) 一个简单的选择框样式...
BootStrap-CSS样式_布局组件_板面(盒子样式)
LoveyourselfJiuhao的博客
12-30 1054
面板：组件用于把 DOM 组件插入到一个盒子中 基本面板 向 &lt;div&gt; 元素 添加 class .panel 和 class .panel-default 即可 面板标题 1.使用 .panel-heading class 可以很简单地向面板添加标题容器 2.使用带有 .panel-title class 的 &lt;h1&gt;-&lt;h6&gt; 来添加预定义样式的标...
前端基础之《Bootstrap（10）—CSS组件_媒体对象、列表组、面板》
csj50的专栏
11-10 619
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。3、回复就是拿一份media搁到p标签下面。.media-heading：右边里面的。.media-object：左边里面的。.media-left：左边的。.media-body：右边的。发表回复、评论的场景。
Bootstrap---css
pet_ch的博客
04-24 1674
1.Bootstrap 是一个基于 HTML、CSS、JAVASCRIPT 的响应式(其内置css中存在大量的媒体查询)前端框架; 2.Bootstrap框架特点：移动设备优先；为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签： <meta name="viewport" content="w...
bootstrap-css组件
星星点灯的博客
08-28 295
CSS组件下拉菜单（单按钮下拉菜单）* .dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。 * data-toggle属性：下拉菜单触发器。取值为“dropdown”。 * .dropdown-menu：给<ul>指定下拉菜单的样式。 * .dropup：向上弹出的下拉菜单(下拉菜单父元素)。 * 下拉菜单对...
Bootstrap-select组件1.6.3版本特性与更新
- **引入必要的CSS和JavaScript文件**：包括Bootstrap的核心CSS和JavaScript文件，以及bootstrap-select的CSS和JavaScript文件。 - **初始化插件**：在页面加载完成后，通过JavaScript调用bootstrap-select的初始化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值