ปุ่ม bootstrap ของ twitter จัดแต่งทรงผม

ปุ่ม Twitter-Bootstrap นั้นสวยงามมาก ลองใช้โดยการเลื่อนดู

แต่มีสี จำกัด

มีวิธีใดบ้างที่ฉันสามารถเปลี่ยนสีพื้นฐานของปุ่มในขณะที่ยังคงเอฟเฟกต์การวางเมาส์เหนือที่สวยงามที่ bootstrap ทำให้สวยงามและง่ายดาย

ฉันไม่รู้โดยสิ้นเชิงว่า css / javascript ดูเหมือนว่า twitter ใช้เพื่อรักษาเอฟเฟกต์เหล่านั้น

โดยทั่วไปปุ่มใน Twitter Bootstrap จะถูกควบคุมใน CSS โดย ".btn {}" สิ่งที่คุณต้องทำคือไปที่ไฟล์ CSS และค้นหาว่ามันเขียนว่า "btn" และเปลี่ยนการตั้งค่าสี อย่างไรก็ตามการทำเช่นนั้นไม่ใช่เรื่องง่ายเพราะคุณต้องเปลี่ยนสีที่ปุ่มจะเปลี่ยนเมื่อคุณไฮไลต์เป็นต้นหากต้องการทำเช่นนั้นคุณต้องมองหาแท็กอื่นใน CSS เช่น ".btn: hover {} "ฯลฯ

การเปลี่ยนต้องเปลี่ยน CSS นี่คือลิงค์ด่วนไปยังไฟล์นั้น:

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

ฉันพบวิธีที่ง่ายที่สุดคือใส่สิ่งนี้ในการลบล้างของคุณ ขออภัยสำหรับการเลือกสีที่ไม่สวยงามของฉัน

Bootstrap 4-Alpha SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

ตัวอย่าง Bootstrap 4 Alpha SASS

Bootstrap 3 น้อยกว่า

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Bootstrap 3 LESS ตัวอย่าง

Bootstrap 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Bootstrap 3 SASS ตัวอย่าง

Bootstrap 2.3 น้อยกว่า

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

Bootstrap 2.3 LESS ตัวอย่าง

Bootstrap 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

มันจะดูแลโฮเวอร์ / แอคทีฟให้คุณ

จากความคิดเห็นหากคุณต้องการทำให้ปุ่มสว่างขึ้นแทนที่จะทำให้มืดลงเมื่อใช้สีดำ (หรือแค่ต้องการผกผัน) คุณต้องขยายชั้นเรียนเพิ่มเติมอีกเล็กน้อยดังนี้:

Bootstrap 3 SASS Ligthen

.my-btn {
  // @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  // override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); // 12% default
  }
}

Bootstrap 3 SASS แบ่งเบาตัวอย่าง

คุณสามารถเขียนทับสีใน css ของคุณได้เช่นปุ่ม Danger:

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

นี่คือแหล่งข้อมูลที่ดี: http://charliepark.org/bootstrap_buttons/

คุณสามารถเปลี่ยนสีและดูเอฟเฟกต์ในการทำงานได้

หากคุณกำลังโหลดไฟล์ CSS ที่กำหนดเองหลังจากโหลด bootstrap.css (เวอร์ชัน 3) แล้วคุณสามารถเพิ่มสไตล์ CSS ทั้ง 2 นี้ใน custom.css ของคุณและจะแทนที่ค่าเริ่มต้น bootstrap สำหรับสไตล์ปุ่มเริ่มต้น

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

.btn
{
  background-color: #9F418F;
  border-color: #9F418F;
}

แทนที่จะเปลี่ยนค่า CSS ทีละรายการฉันขอแนะนำให้ใช้LESS Bootstrap มีเวอร์ชัน LESS บน Github: https://github.com/twbs/bootstrap

LESS ช่วยให้คุณกำหนดตัวแปรเพื่อเปลี่ยนสีซึ่งทำให้สะดวกมากขึ้น กำหนดสีเพียงครั้งเดียวและ LESS รวบรวมไฟล์ CSS ที่เปลี่ยนค่าทั่วโลก ประหยัดเวลาและความพยายาม

ในการลบล้างรูปแบบปุ่ม bootstrap โดยสมบูรณ์คุณต้องแทนที่รายการคุณสมบัติ ดูตัวอย่างด้านล่าง

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

หากคุณไม่ได้ใช้รูปแบบที่ระบุไว้ทั้งหมดคุณจะเห็นรูปแบบเริ่มต้นในการดำเนินการบนปุ่ม ตัวอย่างเช่นเมื่อคุณคลิกปุ่มและเอาตัวชี้เมาส์ออกจากปุ่มคุณจะเห็นสีเริ่มต้นปรากฏขึ้น หรือกดปุ่มค้างไว้คุณจะเห็นสีเริ่มต้น ดังนั้นฉันได้แสดงรายการรูปแบบหลอกทั้งหมดที่จะถูกแทนที่

สำหรับ Bootstrap สำหรับ Sass จะแทนที่มัน

.btn-default {

    @include button-variant($color, $background, $border);

}

คุณสามารถดูแหล่งที่มาได้ที่นี่: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

หรือลองhttp://twitterbootstrapbuttons.w3masters.nl/ มันสร้าง css สำหรับปุ่มตามการป้อนสี html เพิ่ม css หลัง bootstrap css มีปุ่มสามรูปแบบ (สว่างมืดและหมุน)

นี่เป็นวิธีที่ง่ายและมีประสิทธิภาพ: เพิ่ม CSS ในคลาสของคุณด้วยสีที่คุณต้องการใช้กับปุ่มของคุณ:

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

และเพิ่มสไตล์ให้กับปุ่มหรือลิงค์ bootstrap ของคุณ:

<a href="xxx" class="btn btn-info my-btn">aaa</a>

ในTwitter Bootstrap bootstrap 3.0.0 ปุ่ม Twitter จะแบน คุณสามารถปรับแต่งได้จากhttp://getbootstrap.com/customize สีของปุ่มเส้นขอบเป็นต้น

นอกจากนี้คุณสามารถค้นหารหัส HTML และอื่น ๆ การทำงาน http://twitterbootstrap.org/bootstrap-css-buttons

ปุ่ม Bootstrap 2.3.2 เป็นแบบไล่ระดับ แต่ 3.0.0 (รุ่นใหม่) แบนและดูเท่กว่า

และคุณสามารถค้นหาการปรับแต่งรูปลักษณ์และสไตล์ bootstrap ทั้งหมดได้จากแหล่งข้อมูลนี้: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

ฉันรู้ว่านี่เป็นกระทู้เก่า แต่เพื่อเพิ่มมุมมองอื่น ฉันยืนยันว่าการใช้การลบล้างเป็นเพียงกลิ่นรหัสและจะทำให้โครงการใหญ่ ๆ หายไปอย่างรวดเร็ว วันนี้คุณกำลังลบล้างปุ่มโมดอลในวันพรุ่งนี้วันถัดไปมันดร็อปดาวน์ ฯลฯ ฯลฯ

ฉันขอแนะนำให้ลองแสดงความคิดเห็นเกี่ยวกับการรวมbuttons.lessและกำหนดของฉันเองหรือค้นหาไลบรารีปุ่มอื่นที่เหมาะสมกับโครงการของฉันมากกว่า เสียบด้านหน้า: นี่คือตัวอย่างของวิธีที่ง่ายก็คือการผสมห้องสมุดปุ่มของเรากับวัณโรค: การใช้ปุ่มด้วย Twitter Bootstrap ในทางปฏิบัติอีกครั้งคุณอาจต้องการลบการbuttons.lessรวมทั้งหมดออกเพื่อปรับปรุงประสิทธิภาพ แต่จะแสดงให้เห็นว่าคุณสามารถทำให้สิ่งต่างๆดู "ทั่วไป" น้อยลงได้อย่างไร ฉันยังไม่ได้ทำแบบฝึกหัดนี้ด้วยตัวเอง แต่ฉันคิดว่าคุณสามารถเริ่มต้นด้วยการแสดงความคิดเห็นในบรรทัดเช่น:

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

จากนั้นทำการคอมไพล์ใหม่โดยใช้ `lessc โดยใช้โมดูลปุ่มของคุณเอง ด้วยวิธีนี้คุณจะได้รับการทดสอบแกนกลางของ TB แต่ยังสามารถปรับแต่งสิ่งต่าง ๆ ได้โดยไม่ต้องใช้การแทนที่หลัก ไม่มีเหตุผลอย่างแท้จริงที่จะไม่ใช้เฉพาะบางส่วนของไลบรารีเช่น Bootstrap แน่นอนเช่นเดียวกันกับ TB รุ่น Sass

สำหรับ Bootstrap (อย่างน้อยสำหรับเวอร์ชัน 3.1.1) และ LESS คุณสามารถใช้สิ่งนี้:

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

สิ่งนี้ถูกกำหนดไว้ในbootstrap/less/buttons.less.

คุณสามารถเปลี่ยนสีพื้นหลังและใช้!

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}