8. 颜色和样式 - BootStrap

1.颜色Color：

使用.text-*将文本设置成指定的颜色，比如: .text-success；

也可以.text-*-50降色【只有白色和黑色才可以设 置 ： white 和 black ！】

使用.text-*也可以实现悬停和焦点的超链接样式【a标签】，white和muted 这样个颜色不支持！

列出颜色：【来之菜鸟教程】

<div class="container">
  <h2>代表指定意义的文本颜色</h2>
  <p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">执行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危险操作文本。</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>

也就差不都这么多了！自己去尝试。

 

降色例子：【可以降色的颜色才可以用】

<!--只有白色和黑色可以降色50%-->
<h2 class="text-white-50"> 我是white颜色 降色50</h2>
<h2 class="text-black-50">我是black色 降色50</h2>

 

超链接例子：

<!--超链接例子 不支持！white和muted 这两个色-->
<h2 class="text-primary"> 点击登录</h2>
<h2 class="text-danger">点击注销</h2>

 

使用.bg-*可以实现背景色，比如: .bg-success。也可以使用.bg-transparent 设置透明度：

例：

<!--
使用.bg-*可以实现背景色，比如: .bg-success。
也可以使用.bg-transparent 设置背景色全透明
-->
<h2 class="text-primary bg-warning bg-transparent"> 点击登录</h2>
<h2 class="text-danger bg-info">点击注销</h2>

 

2.边框

使用.border给元素增加相应的边框，默认是淡灰色(border-*:top, bottom, left, right指定任意一边)

如果颜色太淡，可以使用.border-*设置想要的场景，比如: .border-success

例：

   <style>
        div{
            float: left;
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: #ffffff;
        }

        .one{
            width: 1000px;
        }
    </style>
</head>
<body>
<!--
border-*包含: primary、secondary、success、danger、warning、info、light、dark、white;【颜色】

使用.border给元素增加相应的边框，默认是淡灰色(border-*:top, bottom, left, right指定任意一边)
如果颜色太淡，可以使用.border-*设置想要的边框颜色，比如: .border-success
此例子已Css修改
-->
<div class="one">
    <div class="border"> </div>
    <div class="border-success  border-top"> </div>
    <div class="border-success border-right"> </div>
    <div class="border-success border-bottom"> </div>
    <div class="border-success border-left"> </div>
</div>

 

使用.border-0消除四周的边框，或使用.border-*-0消除某一边的边框;

例：

  <style>
        div{
            float: left;
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: #ffffff;

        }

        .one{
            width: 1000px;
        }
    </style>
</head>
<body>
<!--
使用.border-0消除四周的边框，或使用.border-*-0消除某一边的边框;
此例子已Css修改
-->
<div class="one">
    <div class="border-0"> </div>
    <div class="border-success border border-top-0"> </div>
    <div class="border-success border border-right-0"> </div>
    <div class="border-success border border-bottom-0"> </div>
    <div class="border-success border border-left-0"> </div>
</div>

 

使用.rounded和.rounded-*实现各种方位圆角,使用.rounded-circle正圆，使用.rounded-pill椭圆

使用.rounded-sm(小圆角）和.rounded-lg (大圆角）实现圆角半径大小;

例：

    <style>
        div{
            float: left;
            width: 150px;
            height: 150px;
            background-color: #6f42c1;
            margin: 10px 10px;
            text-align: center;
            line-height: 100px;
        }

        .one{
            width: 2000px;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<!--
使用.rounded和.rounded-*实现各种方位圆角,使用.rounded-circle正圆，使用.rounded-pill椭圆
使用.rounded-sm(小圆角）和.rounded-lg (大圆角）实现圆角半径大小;
-->
<div class="one">
    <div class="rounded"> rounded </div>
    <div class="rounded-top"> rounded-top</div>
    <div class="rounded-right"> rounded-right </div>
    <div class="rounded-bottom"> rounded-bottom </div>
    <div class="rounded-left"> rounded-left </div>
    <div class="rounded-circle" style="width: 200px; height: 100px" > rounded-circle【正圆】</div>
    <div class="rounded-pill" style="width: 200px; height: 100px"> rounded-pill【椭圆】</div>
</div>

<!--下面两个貌似没软用-->
<div class="one">
    <div class="rounded-sm" style="width: 100px; height: 100px" > rounded-sm </div>
    <div class="rounded-lg" style="width: 100px; height: 100px"  > rounded-lg</div>

</div>

 

posted @ 2021-06-09 20:06  咸瑜  阅读(271)  评论(0)  编辑  收藏  举报