小编hem*_*bin的帖子

Style Bootstrap 4自定义复选框

如何在Bootstrap 4中设置自定义复选框的样式？我尝试了一切,但我甚至无法改变它的背景颜色.

这是我的代码大纲:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>

Run Code Online (Sandbox Code Playgroud)

我的目标是什么？有人可以告诉我如何改变它的背景吗？

谢谢.

html css twitter-bootstrap bootstrap-4

hem*_*bin

lucky-day

9
推荐指数

2
解决办法

4万
查看次数

Sass:HSL颜色代码颜色变暗

我知道如何使用内置函数从十六进制代码中确定较暗的颜色.但是如何用hsl做到这一点？我有三种颜色,一种是主色,一种是深色,一种是浅色.我需要编写一个函数来计算它们之间的差异,并为它们获得更浅和更暗的阴影.因此,当我添加另一种颜色代码时,它会给出相同百分比的浅色和深色.

据我从Sass文档中了解到,我首先需要一个函数来获得基色的色调,饱和度和亮度,对吧？那么呢？

这些是我的十六进制颜色:

$base: #7760BF;
$base-darker: #483584;
$base-lighter: #b5a9dc;

Run Code Online (Sandbox Code Playgroud)

在这里他们是hsl,以防万一:

$base: hsl(255, 43%, 56%);
$base-darker: hsl(254, 43%, 36%);
$base-lighter: hsl(254, 42%, 76%);

Run Code Online (Sandbox Code Playgroud)

有人可以帮我吗？

css sass colors

hem*_*bin

lucky-day

7
推荐指数

1
解决办法

775
查看次数

带有Bootstrap 4的卡中的垂直对齐元素

似乎无法弄清楚如何垂直对齐卡片中的一个标题,一个段落和一个链接.我尝试使用vertical-align实用程序,但它们仅用于内联元素.

这就是我的代码:

.second {
  background: gray;
}
.card-text {
  font-size: 12px;
}
.card-title {
  font-size: 29px;
}
.btn {
  font-size: 12px;
}

Run Code Online (Sandbox Code Playgroud)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="col-6">
  <div class="card">
    <div class="card-block">
      Some other text goes here
    </div>
    <div class="card-block">
      <div class="second p-5">
        <img src="https://placehold.it/200x200" class="rounded-circle float-left mr-4" height="200">
          <h4 class="card-title mb-2">John Doe</h4>
          <p class="card-text mb-2">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap bootstrap-4

hem*_*bin

2017 05-18

6
推荐指数

1
解决办法

1049
查看次数

Bootstrap 4复选框通过背景颜色更改来更改大小

当我更改复选框的背景时,检查图标的大小也会因某种原因调整大小.我怎么能阻止这种情况发生？

看看我的代码,看看我的意思:

.custom-checkbox .custom-control-indicator {
  border-radius: 50%;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 1px solid #2c2b2c;
}
.custom-control-description {
  color: #2c2b2c;
  text-transform: uppercase;
  line-height: 2.7;
  font-size: 12px;
}
/* When I remove background the icon goes back to that default size */
.custom-control-input:checked~.custom-control-indicator {
  background: red;
}

Run Code Online (Sandbox Code Playgroud)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-check">
  <label class="custom-control custom-checkbox">
     <input type="checkbox" class="custom-control-input">
     <span class="custom-control-indicator"></span>
     <span class="custom-control-description ml-4">Checkbox</span>
   </label>
</div> <!-- /.form-check -->

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap bootstrap-4

hem*_*bin

lucky-day

6
推荐指数

1
解决办法

5531
查看次数

如何在折叠时设置 Bootstrap 4 Accordion 标题的样式？

如何设置 Bootstrap 4 手风琴的样式，以便标题在打开和关闭时具有不同的样式？我需要定位哪些类，例如，当手风琴打开时标题颜色为红色，当手风琴未打开时标题颜色为灰色？

这是代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt …

Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap bootstrap-4

hem*_*bin

lucky-day

5
推荐指数

1
解决办法

2万
查看次数

如何使用 NPM 和 Gulp 安装 Slick Carousel？

除了npm install slick-carousel在npm 网站上，我找不到任何关于此的文档。我没有太多以这种方式安装插件的经验，所以如果有人能帮我一把，那就太好了。

这是我到目前为止收集的内容：

我通过 npm 安装 jquery，以便 slick-carousel 可以运行并使用安装它npm install jquery --save，以便（从我收集到的）它包含在我的package.json文件的依赖项中。
然后我以相同的方式安装光滑的轮播，使用 npm install slick-carousel --save

但是然后呢？我看到有人说我也需要require/import我global.js和style.scss文件中的一些文件，但我似乎无法弄清楚哪些或如何？我添加的任何内容都不起作用。

有人可以给我一个快速的纲要，或者指出我正确的阅读方向，因为我真的迷路了？

谢谢！

installation jquery npm gulp slick.js

hem*_*bin

2020 02-27

2
推荐指数

1
解决办法

3612
查看次数

如果选中复选框,则仅更改该项目的样式

我正在创建一个复选框列表,当有人检查复选框时,我需要它来将文本从挂起更改为完成,并将背景更改为绿色.我已经设法使用jQuery完成所有工作.

除了它为每个复选框容器设置样式,而不仅仅是选中的容器.我该如何解决这个问题？如果有人在之后再次取消选中该复选框,我怎样才能将其更改回原始样式？

到目前为止这是我的代码:

$('.custom-control-input').click(function(){
    if (this.checked) {
        $('.pending').css('display', 'none')
        $('.done').css('display', 'block')
        $('.list-group-item').css('background-color','#4CAF50')
    }
})

Run Code Online (Sandbox Code Playgroud)

.done {
  display: none;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<ul class="list-group">
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
</div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
  </div> <!-- /.form-check -->
    <div …

Run Code Online (Sandbox Code Playgroud)

css checkbox jquery twitter-bootstrap

hem*_*bin

2017 06-07

1
推荐指数

1
解决办法

836
查看次数

Bootstrap-在容器流体内垂直和水平居中放置内容

就像标题中所说的那样，在Bootstrap 4中，我无法弄清楚如何在.container-fluid内部的列中居中显示内容。

这是我的代码，有人可以让我知道我做错了吗？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 my-auto mx-auto">
      <div class="mx-auto">
        <h1 class="mb-5">This is a title
        </h1>
        <p class="mb-5">Lorem ipsum</p>
        <a href="#">Click me</a>
      </div>
    </div>
    <div class="col-md-8">
      <p>Something else that's not important but needs to be here </p>
    </div>
  </div>

Run Code Online (Sandbox Code Playgroud)

.mx-auto为什么不起作用，我可以代替它使用什么？

html css css3 twitter-bootstrap bootstrap-4

hem*_*bin

2018 02-12

0
推荐指数

1
解决办法

1360
查看次数

如何在特定元素之后将列表分成两列？

我有一个包含 6 个项目的列表，我想将其排列为两列布局。并且分割需要在元素号 3 之后进行。因此，左列有 3 个元素，右列有 3 个元素。我该如何实现这一目标？我根本无法编辑 HTML。

这是 HTML 布局：

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

Run Code Online (Sandbox Code Playgroud)

html css

hem*_*bin

lucky-day

0
推荐指数

1
解决办法

1038
查看次数

标签统计

css ×8

twitter-bootstrap ×6

bootstrap-4 ×5

html ×5

jquery ×2

checkbox ×1

colors ×1

css3 ×1

gulp ×1

installation ×1

npm ×1

sass ×1

slick.js ×1

标签 统计

小编hem_bin的帖子

标签统计