กำจัดมุมที่โค้งมนทั้งหมดใน Twitter Bootstrap

ฉันชอบ Twitter Bootstrap 2.0 - ฉันชอบที่มันเป็นห้องสมุดที่สมบูรณ์แบบ ... แต่ฉันต้องการที่จะสร้างการเปลี่ยนแปลงระดับโลกสำหรับเว็บไซต์ที่ไม่ได้เป็นกล่องที่รอบกล่องซึ่งจะกำจัดมุมที่โค้งมนใน Bootstrap ...

นั่นเป็น CSS จำนวนมากที่ต้องตัดใจ มีสวิตช์ส่วนกลางหรือจะเป็นวิธีที่ดีที่สุดในการค้นหาและแทนที่การปัดเศษทั้งหมดหรือไม่

ฉันตั้งค่ารัศมีเส้นขอบขององค์ประกอบทั้งหมดเป็น "0" เช่นนี้:

* {
  border-radius: 0 !important;
}

เนื่องจากฉันแน่ใจว่าฉันไม่ต้องการเขียนทับสิ่งนี้ในภายหลังฉันเพิ่งใช้! สำคัญ

หากคุณไม่ได้รวบรวมไฟล์น้อยของคุณเพียงทำ:

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

ใน bootstrap 3 ถ้าคุณกำลังคอมไพล์มันตอนนี้คุณสามารถตั้งค่ารัศมีในไฟล์แปรปรวน:

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

ใน bootstrap 4 หากคุณกำลังรวบรวมมันคุณสามารถปิดการใช้งานรัศมีทั้งหมดใน_custom.scssไฟล์:

$enable-rounded:   false;

ดาวน์โหลด.lessไฟล์ต้นฉบับและทำให้.border-radius()mixin ว่างเปล่า

หากคุณใช้ Bootstrap เวอร์ชัน <3 ...

ด้วย sass / scss

$baseBorderRadius: 0;

ที่มีน้อย

@baseBorderRadius: 0;

คุณจะต้องตั้งค่าตัวแปรนี้ก่อนที่จะนำเข้า bootstrap สิ่งนี้จะส่งผลกระทบต่อหลุมและ navbars ทั้งหมด

ปรับปรุง

หากคุณใช้ Bootstrap 3 baseBorderRadiusควรเป็นborder-radius-base

หากคุณต้องการหลีกเลี่ยงการคอมไพล์.btn {border-radius: 0;}ซ้ำทุกสิ่งเพียงเพิ่มCSS ของคุณ

code,
kbd,
pre,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
    border-radius:0 !important;
}

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

ใน_variables.scssนั้นมีตัวแก้ไขทั่วโลกอยู่หลายตัวเพื่อเปลี่ยนสิ่งต่าง ๆ อย่างรวดเร็วเช่นการเปิดใช้งานหรือปิดการใช้งานระบบ flex gird มุมมนการไล่ระดับสีเป็นต้น

$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

มุมโค้งมนคือ enabledค่าเริ่มต้น

หากคุณต้องการรวบรวม Bootstrap 4 โดยใช้ Sass และของคุณเอง_custom.scssอย่างฉัน (หรือใช้ Customizer อย่างเป็นทางการ) การแทนที่ตัวแปรที่เกี่ยวข้องนั้นเพียงพอแล้ว:

$enable-rounded : false

.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

หรือกำหนดมิกซ์อินและรวมไว้ทุกที่ที่คุณต้องการปุ่ม unrounded

@mixin btn-round-none {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn.btn_1 {
@inlude btn-round-none
}

เมื่อใช้ Bootstrap> = 3.0ไฟล์ต้นฉบับ ( SASSหรือLESS ) คุณไม่จำเป็นต้องกำจัดมุมที่โค้งมนในทุกสิ่งหากมีเพียงองค์ประกอบเดียวที่จะทำการดักฟังคุณเช่นเพื่อกำจัดมุมที่โค้งบน navbar ใช้:

ด้วย SCSS:

$navbar-border-radius: 0;

ด้วยน้อย:

@navbar-border-radius: 0;

อย่างไรก็ตามหากคุณต้องการกำจัดมุมโค้งมนในทุกสิ่งคุณสามารถทำสิ่งที่ @ adamwong246 พูดถึงและใช้:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

การตั้งค่าทั้งสองนี้เป็นการตั้งค่า "รูท" ที่การตั้งค่าอื่น ๆ เช่น navbar-border-radiusนั้นจะสืบทอดมาหากไม่ระบุค่าอื่น

สำหรับรายการตัวแปรทั้งหมดตรวจสอบตัวแปร .lessหรือvariables.scss

รหัสที่โพสต์ข้างต้นโดย @BrunoS ไม่ทำงานสำหรับฉัน

* {
  .border-radius(0) !important;
}

สิ่งที่ฉันใช้คือ

* {
  border-radius: 0 !important;
}

ฉันหวังว่านี่จะช่วยให้ใครบางคน

มีวิธีง่าย ๆ ในการปรับแต่ง Bootstrap:

1. เพียงไปที่http://getbootstrap.com/customize/
2. ค้นหา "รัศมี" ทั้งหมดและแก้ไขตามที่คุณต้องการ
3. คลิก "รวบรวมและดาวน์โหลด" และเพลิดเพลินไปกับ Bootstrap รุ่นของคุณเอง

หรือคุณสามารถเพิ่มสิ่งนี้ลงใน html ขององค์ประกอบที่คุณต้องการลบรัศมีเส้นขอบออก (ด้วยวิธีนี้คุณจะไม่ลบมันออกจากปุ่ม / องค์ประกอบทั้งหมด):

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"

ด้วย SASS Bootstrap - หากคุณกำลังรวบรวม Bootstrap ด้วยตัวเอง - คุณสามารถกำหนดรัศมีเส้นขอบทั้งหมด (หรือเฉพาะเจาะจงมากขึ้น) ให้เป็นศูนย์:

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

Bootstrap มีคลาสของตัวเองสำหรับเส้นขอบรวมถึง.rounded-0การกำจัดมุมโค้งมนในองค์ประกอบใด ๆ รวมถึงbuttons

https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary">Regular Rounded Corners</a>
<a class="btn btn-primary rounded-pill">Pill Corners</a>
<a class="btn btn-primary rounded-0">Square Corners</a>

นอกจากนี้คุณยังอาจต้องการที่จะมีลักษณะที่FlatStrap มันมีการเปลี่ยนเมโทรสไตล์สำหรับ Bootstrap CSS โดยไม่ต้องมุมมนการไล่ระดับสีและเงา

หากคุณใช้ bootstrap คุณสามารถใช้ bootstrap class = "round-0" เพื่อทำให้เส้นขอบมีขอบคมโดยไม่มีมุมมน <button class="btn btn-info rounded-0"">Generate</button></span>

ฉันสร้างไฟล์ css อีกไฟล์หนึ่งและเพิ่มรหัสต่อไปนี้มีองค์ประกอบบางส่วนเท่านั้น

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    border-collapse: collapse !important;
    background-image: none !important;
}