css基础属性及BootStrap的引入

最新推荐文章于 2024-04-30 15:44:23 发布
最新推荐文章于 2024-04-30 15:44:23 发布
阅读量2.8k 收藏 13
点赞数 3
分类专栏： JavaScript css bootstrap 文章标签： css bootstrap html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62935155/article/details/124650916
版权
JavaScript 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏
bootstrap
1 篇文章 0 订阅
订阅专栏

CSS（网站的表现）

1.CSS是层叠样式表

2.CSS的存在形式

2.1 单作用域在标签内部添加CSS样式

<div style="background-color: red;color: blue">文本内容</div>

2.2 全局定义标签样式

  • 在单个html中
<head>
    <meta charset="UTF-8">
    <title>CSS的作用域</title>
    <style>
        div{
            background-color: red;
            color: blue;
        }
    </style>
</head>
  • 可以写入一个CSS文件，这样html都可以调用CSS

新建一个CSS文件，并输入div标签格式
在这里插入图片描述

div{
    background-color: red;
    color: blue;
}
  • 要在html的header头中引入CSS文件
<head>
    <meta charset="UTF-8">
    <title>CSS的作用域</title>
    <link rel="stylesheet" href="div.css"/>
</head>
  • 注意：

对于调用CSS文件时，若html中没有，那就是继承关系，就会继承CSS的格式

若有相同的定义，则优先级为：body >heard >CSS文件

3. CSS选择器

3.1 标签选择器

会找到html中所有的div标签，然后添加样式

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        div{
            background-color: red;
            color: blue;
        }
    </style>
</head>

3.2 id选择器

会找到html中所有id=i1的标签，然后添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        #i1 {
            font-size: 56px;
            color: greenyellow;
        }
    </style>
</head>
<body>
<a id="i1">百度</a>
</body>
</html>

3.3 class选择器

会找到html中所有class=c1的标签，然后添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        .c1 {
            background-color: blueviolet;
            color: deeppink;
        }
    </style>
</head>
<body>
<div class="c1">文本内容2</div>
<div class="c1">文本内容3</div>
<span class="c1">文本内容4</span>
</body>
</html>

3.4 层级选择器

会找到div下面的p标签下面的a标签，然后添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        .i1 div p a {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
<div class="i1">
    <div>
        <p>
            <span>oooooo</span><br><br>
            <a>uuuuuuuu</a>
        </p>
    </div>
</div>
<div class="i1">zzzzzzzzz</div>
</body>
</html>

3.5 组合选择器

同时为i1,i2和i3添加同一个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        .i1, .i2, .i3 {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
<div class="i1">1</div>
<div class="i2">1</div>
<div class="i3">1</div>
</body>
</html>

4. CSS的注释写法

<style>
    /*这是CSS的注释写法*/
    .i1, .i2, .i3 {
        background-color: blueviolet;
    }
</style>

5. CSS的基本样式（!DOCTYPE规范下）

5.1 color（字体颜色）

    <style>
        .i1 {
            color: green;
        }
    </style>

5.2 background-color（背景颜色）

    <style>
        .i1 {
            background-color: green;
        }
    </style>

5.3 font-size（字体大小）

    <style>
        .i1 {
            font-size: 32px;
        }
    </style>

5.4 height（高度）

5.5 width（宽度）

    <style>
        .i1 {
            /* 高度没有100% */
            height: 300px;
            /* 宽度可以有100% */
            width: 100%;
        }
    </style>

5.6 块级标签和内敛标签的转化

<!--div转换为内敛-->
<div style="display: inline-block" class="c1">联通</div>
<!--内敛转换为块级-->
<span style="display: block">联通</span>

5.7 字体

    <style>
        .c1 {
            color: red;
            /*字体大小*/
            font-size: 58px;
            /*字体加粗*/
            font-weight: 600;
            /*字体*/
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    </style>

5.8文字对齐方式

    <style>
        .c1 {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            text-align: center;        /*水平方向剧中*/
            line-height: 300px;        /*垂直居中*/
        }
    </style>

5.9 浮动

<div>
    <span style="float: right">中国联通</span>  <!--向右浮动-->
    <span>中国移动</span>
</div>

标签如果浮动起来，容易脱离文档流

<div style="background-color: blue">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div style="clear: both"></div>
</div>

一但出现浮动要加clear：both

5.10 边距

  • 内边距
    <style>
        .outer {
            border: 1px solid red;
            height: 400px;
            width: 200px;
            /*距离顶部*/
            padding-top: 20px;
            /*距离左侧*/
            padding-left: 20px;
            padding-bottom: 20px;
            padding-right: 20px;
        }
    </style>
  • 外边距
<div style="background-color: goldenrod;">ok</div>
<!--外边距margin-->
<div style="background-color: red;margin-top: 20px;margin-left: 20px">no</div>

5.11文本剧中

  • 文本居中
<div style="width: 200px;text-align: center;background-color: #2aabd2">文本内容</div>
  • 区域居中
自己要有宽度 + margin-left:auto;margin-right:ayto

5.12 hover

鼠标放上之后发生改变

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .download{
            margin-top: 100px;
            display: none;
        }
        .app{
            border: 1px ridge red;
        }
        .app:hover .download{
            display: block;
        }
    </style>
</head>
<body>
<div class="app">
    <div style="width: 100px;height: 100px">可视化照片</div>
    <div class="download"><img src="img/0adff7f3-e963-49ad-8882-5bc70ee23ded.png"></div>
</div>
</body>

5.13 after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .item{
            width: 100px;
            height: 100px;
        }
        .item:after{

            content: "点此看照片";
        }
        .download{
            margin-top: 100px;
            display: none;
        }
        .app{
            border: 1px ridge red;
        }
        .app:hover .download{
            display: block;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="item">可视化照片</div>
    <div class="download"><img src="img/0adff7f3-e963-49ad-8882-5bc70ee23ded.png"></div>
</div>
</body>
</html>

总要应用：标签浮动时可能脱离文档流，我们可以用after来解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .item{
            float: left;
            border: 1px ridge red;
            background-color: #2aabd2;
            width: 200px;
            height: 200px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 56px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
<div class="clearfix">
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
</div>
</body>
</html>

5.14 position

  • fixed
  • relative
  • absolute
5.14.1 fixed

固定窗口位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .item{
            float: left;
            border: 1px ridge red;
            background-color: #2aabd2;
            width: 200px;
            height: 200px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 56px;
            text-align: center;
            line-height: 200px;
        }
        .back{
            position: fixed;
            width: 100px;
            height: 60px;
            border: 1px solid blueviolet;
            right: 10px;
            bottom: 50px;
            font-size: 20px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
<div class="clearfix">
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
</div>
<div class="back">返回顶部</div>
</body>
</html>

案例：模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        .dialog {
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;
            left: 50%;
            margin-left: -250px;
            top: 200px;
            z-index: 1000;
            /*  另一种居中方式
                left:0;
                right:0;
                margin:0 auto;
            */
        }
        .mask{
            position: fixed;
            background-color: black;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            /* 透明度*/
            opacity: 0.7;
            z-index: 999;
        }
    </style>
</head>
<body>
<div style="height: 2000px"></div>
<div class="mask"></div>
<div class="dialog"></div>
</body>
</html>
5.14.2 relative和absolute

absolute会看relative的位置来调整自己的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            margin: 100px;
            position: relative;
        }
        .c1 .c2{
            height: 60px;
            width: 60px;
            background-color: green;
            position: absolute;
            top: 10px;
            left: 20px;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>
</div>
</body>
</html>

6.BootStrap

是别人帮我们写好的css样式，如果我们想用BootStrap：

  • 下载BootStrap
  • 使用
    • 在页面上引入BootStrap
    • 编写html时，按照BootStrap的规定编写+自定制

6.1初识BootStrap

https://v3.bootcss.com/getting-started/#download

然后：
在这里插入图片描述

然后解压，然后引入进来就可以了(注意要把解压后的文件拉到你的项目中，方便调用)

    <!--开发版本-->
    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css">
    <!--压缩版（就是省去换行）-->
    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.min.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始BootStrap</title>
    <!--开发版本-->
    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css">
<!--    &lt;!&ndash;压缩版（就是省去换行）&ndash;&gt;-->
<!--    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.min.css">-->
</head>
<body>
<input type="button" value="提交"/><br><br>
<input type="button" value="提交" class="btn btn-primary"/>
</body>
</html>

我们来看差别

在这里插入图片描述

这样我们就能省很多事，BootStrap帮我们写了6000多行css样式，只要我们去引入就好了

6.2 基于BootStrap来做导航

打开它的官方文档

全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
在这里插入图片描述

在这里插入图片描述

copy一下，然后粘贴过来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始BootStrap</title>
    <!--开发版本-->
    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css">
    <!--    &lt;!&ndash;压缩版（就是省去换行）&ndash;&gt;-->
    <!--    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.min.css">-->
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
</body>
</html>

这时我们运行一下

在这里插入图片描述

这时就出现了导航条

6.3 BootStrap依赖

  • BootStrap给我们写好了很多的javascript的动态效果

  • BootStrap依赖javascript的类库，JQurey

  • 还要再页面导入我们的JQurey和Bootstrap的javascript的类库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootStrap</title>
    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script src="bootstrap/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

只要引入这两个插件，所有的BootStrap的效果就都解锁了，具体还要看官方文档

7. 总结

经过前面的学习我们已经掌握了html和css的基础

我们都知道html为网站的骨架，css为网站的表现，后续我会带着大家详细了解javascript jqurey以及深入了解BootStrap

凸头拯救地球
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap入门、CSS样式【栅格系统】
weixin_66281589的博客
04-29 1395
1.WWW：What、Why、Where What:Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。 Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。 用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的，简介灵活，使Web开发更加快捷 总结：Bootstrap是一个建立在一个页面，可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架 Why: 响应式设计(Bootst
Bootstrap CSS使用方法
08-31
Bootstrap 为了兼容旧版的Internet Explorer浏览器（如IE6、7、8），建议在HTML文档的头部引入特定的polyfill或条件注释来支持HTML5新标签和CSS3样式。同时，框架本身大量利用HTML5元素和CSS3属性，确保了现代...
Bootstrap---css
pet_ch的博客
04-24 1517
1.Bootstrap 是一个基于 HTML、CSS、JAVASCRIPT 的响应式(其内置css中存在大量的媒体查询)前端框架; 2.Bootstrap框架特点：移动设备优先；为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签： <meta name="viewport" content="w...
前端基础之《Bootstrap（2）—全局CSS样式_栅格系统》
csj50的专栏
11-01 1271
bootstrap.min.css：是去除空格和回车，压缩版。bootstrap.css：是供我们学的没有压缩版。3、bootstrap javascript插件。1、bootstrap全局CSS样式。2、bootstrap CSS组件。二、项目引入Bootstrap。一、Bootstrap要点。其实就是官网上的这三个。
前端框架---Bootstrap的使用
最新发布
m0_74249162的博客
04-30 735
Bootstrap是一个来自Twitter的前端开发框架，它基于HTML、CSS和JavaScript，以其简洁灵活的特性使得Web开发更加快捷。基本结构网格系统：Bootstrap使用12列网格布局，可以快速构建响应式布局。通过添加class到HTML元素上，可以指定元素在不同屏幕宽度下的列数和偏移量。CSS样式：Bootstrap包含了大量的预设CSS样式，如排版、颜色、按钮、表单等，可以快速地为网页添加统一的样式。JavaScript插件。
vue中引入css第三方库的两种方法（以bootstrap.css为例）
Canace_Xyxjjcaw的博客
03-22 2897
方法1：在存放静态资源的assets里面新建一个文件夹css，把bootstrap.css放到新建的文件夹css中，然后在App.vue页面引入bootstrap.css 【通过import引入，vue脚手架会进行非常严格的检查】 方法2：在public里面新建文件夹css，把bootstrap.css放到新建的文件夹css中，在public下面的index.html文件中引入bootstrap.css ...
bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版
Leon_Jinhai_Sun的博客
03-07 421
http://www.bootcss.com/ 基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http...
CSS样式的基础学习总结
09-25
3. 行内样式：行内样式是将CSS属性直接写在HTML元素的`style`属性中，如`;">`，这种方式具有最高的优先级，但不推荐大量使用，因为会降低代码的可维护性和重用性。 三、CSS文字属性 1. `color`: 设置文本颜色，如`...
bootstrap基础知识学习笔记
09-01
-- Bootstrap CSS & JS 引入 --> <!-- 页面内容 --> ``` 3. **CSS 选择器优先级**：理解 CSS 选择器的优先级至关重要，因为它决定了哪些样式会被应用。优先级顺序是：内联样式（style属性） > ID选择器 > 类...
bootstrap读书笔记之CSS组件（上）
09-01
在本篇“bootstrap读书笔记之CSS组件（上）”中，我们将深入探讨Bootstrap中的CSS组件，特别是图标、下拉菜单和按钮组。 一、图标字体 Bootstrap 3 包含了超过200个免费的Glyphicons图标，这些图标实际上是一种...
Bootstrap CSS组件之下拉菜单(dropdown)
08-31
为了使Bootstrap下拉菜单正常工作，需要引入Bootstrap的CSS和JavaScript文件。在HTML头部，通常会引用Bootstrap的CSS样式表，如示例中的`<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet...
Bootstrap CSS 概览
dahanhe的博客
11-15 1086
在这一章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。
Bootstrap引入和使用
AZURE060606的博客
02-26 2001
Bootstrap是一个开源的前端框架，用于对HTML和CSS代码进行封装，因此可以直接在标签中加入现成的属性来实现需求v3官方文档库：官方书写好了大量现成的CSS样式以及组件。
Bootstrap常用类
qq_39039534的博客
04-21 3371
1.Bootstrap简介 Bootstrap 是一款快速构建、响应式网站的，UI框架。框架的作用就是为开发人员提供一些已经封装好，或者已经优化好的名称，可以直接使用来达到效果。前提是一定要按照他提供的文档进行书写。 学习框架的终极目的是：查阅文档，查看源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp
认识Bootstrap与引用
weixin_52120405的博客
05-28 781
1.官网：Bootstrap中文网 (bootcss.com) 2.BS是一个入门级UI框架，汇集了HTML、CSS（less）（布局）和JavaScript（插件）的一个框架。 3.BS不是所有项目都适合使用BS实现布局，如果UI工程师没有按照BS的栅格系统理念去设计UI图，因为BS不适合做固定宽高的网页。 BS一般用于开发没有UI图的项目，且为响应式的项目。 4.BS3和BS4的区别： BS3有4种栅格，而BS4有5种栅格； BS4全面引入ES6，...
2.1 Bootstrap CSS 概览
梁辰兴的博客
06-26 678
除此之外，点击过的链接，会呈现一个颜色码为 #333 的细的虚线轮廓。如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），您可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不能通过 W3C 标准的验证。当您把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。
bootstrap组件-引入官方组件
qq_46112274的博客
01-11 761
1、创建文件目录 2、引入css 3、引入js 4、创建container容器 5、引入要用的组件 bootstrap下拉菜单组件地址：https://v3.bootcss.com/components/#dropdowns 页面效果
link标签的href=与 rel=stylesheet是什么意思？
热门推荐
cx-young的博客
03-30 2万+
link标签的href与 rel=stylesheet是什么意思？ 此处是设置CSS样式的，叫做外部格式链接。 rel=“stylesheet” type=“text/css” 是固定写法，不可修改。 href是URL rel是relationship的英文缩写，意思是“关系”； stylesheet中style是“样式”的意思,sheet是”表格“，加起来是样式表的意思； href连接的文档是一...
bootstrap快速入门
javaeEEse的博客
06-29 613
前言 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5.
引入bootstrap之后怎么禁止bootstrap的css样式
05-25
如果你想禁止bootstrap的css样式，可以通过以下方法实现： ...例如，如果你想禁止bootstrap的某个组件的样式，可以给该组件添加一个自定义的`class`或`id`属性，并在自己的CSS文件中覆盖掉bootstrap的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值