Bootstrap定制化

最新推荐文章于 2022-11-22 10:55:22 发布

_洋

最新推荐文章于 2022-11-22 10:55:22 发布

阅读量329

点赞数

分类专栏： Bootstrap 文章标签： bootstrap css html

本文链接：https://blog.csdn.net/mantou_riji/article/details/124694791

版权

Bootstrap 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文介绍了如何在不破坏Bootstrap源码结构的情况下，通过新建less文件并@import引入bootstrap.less，然后覆盖原有样式。示例中展示了如何修改网格间距和容器背景色，并添加了针对class以.col开头的div的边框。这种方法使得个性化定制Bootstrap样式变得简单易行。

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

在使用Bootstrap框架的时候我们有可能需要修改他已经写好的样式，但是直接在Bootstrap的源码中修改可能会破坏源码的结构，不推荐这样做。
这就引入了定制化，新建less文件，@import 引入bootstrap.less 文件，在下面重新样式，将之前的样式覆盖掉。
eg：
my.less:

@import "./less/bootstrap.less";
@grid-gutter-width:200px;

html引入my.css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./my.css">
    <style>
        *{
            box-sizing: border-box;
        }
        .container{
            background-color: rgb(189, 224, 255);
        }
        /* class以col开头的div容器 */
        div[class^=col]{
            border: teal solid 1px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-md-6">col-lg-10</div>
            <div class="col-lg-2 col-md-6">col-lg-2</div>
        </div>
    </div>
    
</body>
<script type='text/javascript' src='../js/jquery-1.12.4.js'></script>
<script type='text/javascript' src='../js/bootstrap.js'></script>

</html>

输出：
在这里插入图片描述

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap定制化

在使用Bootstrap框架的时候我们有可能需要修改他已经写好的样式，但是直接在Bootstrap的源码中修改可能会破坏源码的结构，不推荐这样做。这就引入了定制化，新建less文件，@import 引入bootstrap.less 文件，在下面重新样式，将之前的样式覆盖掉。eg：my.less:@import "./less/bootstrap.less";@grid-gutter-width:200px;html引入my.css:<!DOCTYPE html><html
复制链接

扫一扫

专栏目录