1

ビューポートが狭い場合にブートストラップに表示されるボタンがあります..ブートストラップ対応を使用して..。

このボタンの色の外観を変更するにはどうすればよいですか？bootswatch.comの人々は、いくつかの変数をより少なく変更することでそれを行うことができることを知っていますが、彼らはどのようにそれを行っていますか？

編集：私は次のSASSコードで少し進歩しました。（sass-bootstrap gemを使用しています）

.navbar .btn-navbar {
  background-color: $navbarLinkBackgroundHover;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

          &:hover {
            background-color: lighten($navbarLinkBackgroundHover, 1%);
          }
}

上記は、ボタンの背景とボタンの丸みを変更します。それでも、境界線のストロークを変更する方法がわかりませんか？何か案は？

.navbar .btn-navbar .icon-bar {
  background-color: $heading-blue;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

このコードのチャンクは、ボタン内の水平ダッシュの色を変更するのに役立ちます。

EDIT2：

ボーダーストロークを理解しました..cssで呼ばれるボーダーカラーとボーダー幅！（.navbar .btn-navbarに適用）

  border-color: $dropdown-border $dropdown-border darken($dropdown-border, 10%) $dropdown-border;
  border-width: 2px;
4

2 に答える 2

1 
.navbar .btn-navbar {
display: none;
float: right;
padding: 7px 10px;
margin-left: 5px;
margin-right: 5px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ededed;
background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0);
border-color: #e5e5e5 #e5e5e5 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e5e5e5;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */

これは属性を持つCSSセレクターです。新しいCSSルールを作成するだけで、less変数を変更せずにこれらの値を上書きできます。

少ない変数がどのように機能するのか疑問に思っている場合は、変数値に基づいてグラデーションを作成します。例えば、 

box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

黒より75％明るい色からボックスシャドウを作成します。変数0、0、0がbox-shadowプロパティに渡されました。

于 2013-02-16T01:19:19.397 に答える
-1

でそれらを単純に無視してみませんかstyle = "background-color:#hex;"。もしよろしければ便利です

于 2013-07-29T05:45:18.047 に答える