Loại bỏ tất cả các góc tròn trong Twitter Bootstrap

Tôi yêu Twitter Bootstrap 2.0 - Tôi thích cách thư viện hoàn chỉnh như vậy ... nhưng tôi muốn thực hiện một sửa đổi toàn cầu cho một trang web không tròn trịa, để loại bỏ tất cả các góc tròn trong Bootstrap ...

Đó là rất nhiều CSS để chug qua. Có một công tắc toàn cầu, hoặc điều gì sẽ là cách tốt nhất để tìm và thay thế tất cả các vòng?

Tôi đặt bán kính đường viền của tất cả thành phần "0" như thế này:

* {
  border-radius: 0 !important;
}

Vì tôi chắc chắn rằng tôi không muốn ghi đè lên điều này sau này tôi chỉ sử dụng!

Nếu bạn không biên dịch các tệp ít hơn, chỉ cần làm:

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

Trong bootstrap 3 nếu bạn đang biên dịch nó, bây giờ bạn có thể đặt bán kính trong tệp biến.less:

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

Trong bootstrap 4 nếu bạn đang biên dịch nó, bạn có thể vô hiệu hóa bán kính hoàn toàn trong _custom.scsstệp:

$enable-rounded:   false;

Tải về các .lesstệp nguồn và làm .border-radius()trống mixin.

Nếu bạn đang sử dụng phiên bản Bootstrap <3 ...

Với sass / scss

$baseBorderRadius: 0;

Với số ít

@baseBorderRadius: 0;

Bạn sẽ cần đặt biến này trước khi nhập bootstrap. Điều này sẽ ảnh hưởng đến tất cả các giếng và hải quân.

Cập nhật

Nếu bạn đang sử dụng Bootstrap 3 baseBorderRadius thì nên là Border-radius-base

Nếu bạn muốn tránh biên dịch lại tất cả mọi thứ, chỉ cần thêm .btn {border-radius: 0;}vào CSS của bạn.

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;
}

Câu hỏi này khá cũ tuy nhiên nó rất dễ thấy trên các công cụ tìm kiếm ngay cả trong các tìm kiếm liên quan đến Bootstrap 4 . Tôi nghĩ rằng đáng để thêm một câu trả lời cho việc vô hiệu hóa các góc tròn, cách BS4.

Trong _variables.scssđó có một số sửa đổi toàn cầu tồn tại để nhanh chóng thay đổi các công cụ như bật hoặc tắt hệ thống uốn cong, góc tròn, độ dốc, v.v.

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

Các góc tròn được enabledmặc định.

Nếu bạn thích biên dịch Bootstrap 4 bằng Sass và chính bạn _custom.scssnhư tôi (hoặc sử dụng tùy biến chính thức), ghi đè biến liên quan là đủ:

$enable-rounded : false

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

Hoặc xác định một mixin và đưa nó vào bất cứ nơi nào bạn muốn có một nút không có dấu.

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

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

Khi sử dụng Bootstrap> = 3.0tệp nguồn ( SASShoặc LESS), bạn không cần phải loại bỏ các góc được làm tròn trên mọi thứ nếu chỉ có một yếu tố đang làm phiền bạn, ví dụ, chỉ cần loại bỏ các góc được làm tròn trên thanh điều hướng, sử dụng:

Với SCSS:

$navbar-border-radius: 0;

Với số ít:

@navbar-border-radius: 0;

Tuy nhiên, nếu bạn muốn loại bỏ các góc tròn trên mọi thứ, bạn có thể làm những gì @ adamwong246 đã đề cập và sử dụng:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Hai cài đặt đó là cài đặt "gốc" mà từ đó các cài đặt khác navbar-border-radiussẽ được kế thừa trừ khi các giá trị khác được chỉ định.

Để biết danh sách, tất cả các biến hãy kiểm tra các biến.less hoặc biến.scss

Mã được đăng ở trên bởi @BrunoS không hoạt động đối với tôi,

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

những gì tôi đã sử dụng là

* {
  border-radius: 0 !important;
}

tôi hi vọng điêu nay se giup được ai đo

Có một cách rất dễ dàng để tùy chỉnh Bootstrap:

1. Chỉ cần truy cập http://getbootstrap.com/customize/
2. Tìm tất cả "bán kính" và sửa đổi chúng theo ý muốn.
3. Nhấp vào "Biên dịch và tải xuống" và thưởng thức phiên bản Bootstrap của riêng bạn.

Hoặc bạn có thể thêm phần này vào html của phần tử bạn muốn xóa bán kính đường viền từ (cách này bạn sẽ không xóa phần tử này khỏi tất cả các nút / phần tử):

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

Với SASS Bootstrap - nếu bạn tự biên dịch Bootstrap - bạn có thể đặt tất cả bán kính đường viền (hoặc cụ thể hơn) chỉ bằng không:

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

Bootstrap có các lớp riêng cho các đường viền bao gồm .rounded-0loại bỏ các góc tròn trên bất kỳ phần tử nào, bao gồmbuttons

https://getbootstrap.com/docs/4.4/utilities/bnings/#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>

Bạn cũng có thể muốn xem FlatStrap . Nó cung cấp một sự thay thế kiểu Metro cho CSS Bootstrap mà không có các góc tròn, độ dốc và bóng đổ.

nếu bạn đang sử dụng bootstrap, bạn chỉ có thể sử dụng lớp bootstrap = "round-0" để tạo đường viền với các cạnh sắc nét không có góc tròn <button class="btn btn-info rounded-0"">Generate</button></span>

Tôi đã tạo một tệp css khác và thêm đoạn mã sau Không phải tất cả các yếu tố đều được bao gồm

/* 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;
}