bootstrap的样式

最新推荐文章于 2024-04-03 03:21:16 发布

lingengy

最新推荐文章于 2024-04-03 03:21:16 发布

阅读量702

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/w1lgy/article/details/78998947

版权

本文介绍了Bootstrap的字体图标使用方法，包括在控件中添加'glyphicon'类以显示图标，并可以通过控制字体样式来调整图标大小和颜色。接着讲解了Bootstrap的颜色设置，如primary、success等，以及如何在不同组件（如文字、按钮、弹窗和面板）中应用这些颜色。此外，还提到了登录面板的设置以及其他的常用样式效果，如active、disabled状态，以及不同尺寸的控制关键字。

摘要由CSDN通过智能技术生成

一、字体图标

进入bootstrap官方文档的组件页面https://v3.bootcss.com/components/，最上面的组件就是字体图标“Glyphicons 字体图标”部分。在控件的class中声明字体图标，既加一个class样式“glyphicon”，然后把在这里找到图标后把图标对应的名字单词class样式放到相应的控件里：

<div class="container">
    <div class="row">
        <div class="glyphicon glyphicon-ok" style="color:red; font-size:40px;"></div>
        aaaaa   
    </div>
</div>

这里写图片描述
由于字体图标看起了是个图片图标，担实际可以把它当成字体来对待，所以控制其大小颜色等样式就跟控制一般的字体一样。

二、颜色设置

最常用的颜色样式有如下几个：primary success info warning danger。不同的控件由相应的前缀加上这些单词即可控制控件的颜色。各控件对应的前缀如下：
文字设置：text-
背景设置：bg-
按钮设置：btn-
弹窗设置：alert-
面板设置：panel-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <!---->
        <link rel="stylesheet" href="css/bootstrap.css" />
        <style>
        .tips1{
            width:30px;
            height:300px;
            background:black;
            right:0
        }
        .tips2{
            width:30px;
            height:100px;
            background:blue;
            right:0;
        }
        #div1{
          width:400px;
        }
        </style>
    </head>
    <body style="height:2000px;">
        <div class="container">
            <div class="row">
                <input type="button"  value="默认样式"/>
                <input type="button"  value="首选项" class="btn btn-primary"/>
                <