4

内部に仕切りが付いたブートストラップボタンを作成したいと思います。

仕切りの左側には、左側に配置されたボタンのテキストがあります。仕切りの右側には、中央にプラス/マイナスのアイコンが配置されています。仕切りは常にボタンの右側から33pxに配置されます。仕切りは白になります。

そのような効果を生み出すための最良のテクニックは何ですか？（私は画像よりもCSSとフォントを使用する方が好きです）。

評判が悪いのでサンプル画像をアップロードできませんが、アイデアが浮かんだらいいのですが:)

助けてくれてありがとう！

4

4 に答える 4

5

ボタン（タグ）内にスパンを定義することになりました。スパンはボタンの右側にあり、アイコンが含まれています。左の境界線を白に着色し、右のパディングを付けて、アイコンに十分なスペースを与え、ボタンの上部まで引き伸ばすようにしました。

cssコード：

.btn-blue {
    /* Button definintion*/
}

.btn-blue-right-section {
    text-align:center;
    padding: 4px 0 5px 10px;
    margin-left: 10px;
    border-left: 1px solid #86c7fe;
}

.btn-blue-icon {
    color: white;
    width: 13px;
}

結果の画像： ここに画像の説明を入力してください

于 2012-09-10T12:44:32.333 に答える
1

http://twitter.github.com/bootstrap/components.html#buttonGroups

<div class="btn-group">
<a class="btn" href="#">Button text</a>
<a class="btn" href="#"><i class="icon-plus"></i></a>
</div>

そして、色を上書きするだけです。

于 2012-09-10T11:11:44.267 に答える
1

ここではグリフィコンを使用しています。

bootstrap buttonパディングがあるため、を削除paddingしてそれぞれに移動する必要がありますspan。

.btn-nopadding{
    padding: 0px;
    font-size: 24px; /* optional */
}
.btn-padding{
    padding: 20px 20px 25px 20px;
}

/* if you want divider to left / logo at right */
.btn-divider-left{
    border-left: 1px solid #1e4d76; /* set your color here */
}

/* if you want divider to right / logo at left */
.btn-divider-right{
    border-right: 1px solid #1e4d76; /* set your color here */
}

これがhtmlです

<!-- example for left divider / logo at right -->

<a href="#" class="btn btn-primary btn-lg btn-nopadding">
    <span class="btn-padding">BUTTON NAME</span>
    <span class="glyphicon glyphicon-plus btn-divider-left btn-padding"></span>
</a>

<!-- example for right divider / logo at left -->

<a href="#" class="btn btn-primary btn-lg btn-nopadding">
    <span class="glyphicon glyphicon-plus btn-padding btn-divider-right"></span>
    <span class="btn-padding">BUTTON NAME</span>
</a>

フィドルの例：フィドルプレビュー

画像でプレビュー：

ここに画像の説明を入力してください

于 2018-10-09T07:39:30.677 に答える
0

これを試して

html

<button type="button" class="btn bg-blue fs-it-btn text-uppercase" aria-label="Left Align">Click me <span class="fs-it-btn-vertical-line"></span><i class="fa fa-plus" aria-hidden="true"></i></button>

css

.fs-it-btn {
  margin-top: 10px;
  border: 1px solid #a2a2a2;
  border-radius: 0;
  color: #fff;
  font-weight: bold;
}
.fs-it-btn-vertical-line {
  text-align:center;
  padding: 4px 0 5px 10px;
  margin-left: 10px;
  border-left: 1px solid #a2a2a2;
}
.bg-blue {
    background-color: #2c9deb;
}
.text-uppercase {
    text-transform: uppercase;
}

アイコンにはfontawesomeを使用しました。

于 2017-05-24T06:41:18.863 に答える