Bootstrap-css组件

最新推荐文章于 2022-11-15 21:36:07 发布

Leona__

最新推荐文章于 2022-11-15 21:36:07 发布

阅读量431

点赞数

文章标签： css bootstrap html

本文链接：https://blog.csdn.net/Leona__/article/details/121049506

版权

小图标

类名：
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
span	input-group-addon
input	form-control
button	input-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

最低0.47元/天解锁文章

Leona__

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-css组件

小图标类名：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-wi
复制链接

扫一扫