Menyingkirkan semua sudut membulat di Twitter Bootstrap

Saya suka Twitter Bootstrap 2.0 - Saya suka bagaimana perpustakaan ini begitu lengkap ... tapi saya ingin membuat modifikasi global untuk situs yang sangat tidak berbentuk kotak, yaitu untuk menghilangkan semua sudut bundar di Bootstrap ...

Itu banyak CSS untuk ditembus. Apakah ada perubahan global, atau apa yang akan menjadi cara terbaik untuk menemukan dan mengganti semua yang dibulatkan?

Saya menetapkan radius batas semua elemen ke "0" seperti ini:

* {
  border-radius: 0 !important;
}

Karena saya yakin saya tidak ingin menimpa ini nanti saya hanya menggunakan! Penting.

Jika Anda tidak mengkompilasi lebih sedikit file, lakukan saja:

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

Di bootstrap 3 jika Anda mengompilasinya, Anda sekarang dapat mengatur radius di file variable.less:

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

Di bootstrap 4 jika Anda mengompilasinya, Anda dapat menonaktifkan jari-jari semuanya dalam _custom.scssfile:

$enable-rounded:   false;

Unduh .lessfile sumber dan buat .border-radius()mixin kosong.

Jika Anda menggunakan versi Bootstrap <3 ...

Dengan sass / scss

$baseBorderRadius: 0;

Dengan kurang

@baseBorderRadius: 0;

Anda perlu mengatur variabel ini sebelum mengimpor bootstrap. Ini akan memengaruhi semua sumur dan navbar.

Memperbarui

Jika Anda menggunakan Bootstrap 3 baseBorderRadius harus berupa border-radius-base

Jika Anda ingin menghindari kompilasi ulang semua hal, tambahkan saja .btn {border-radius: 0;}ke CSS Anda.

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

Pertanyaan ini cukup lama namun sangat terlihat di mesin pencari bahkan di Bootstrap 4 pencarian terkait . Saya pikir itu layak untuk menambahkan jawaban untuk menonaktifkan sudut membulat, cara BS4.

Di _variables.scsssana ada beberapa pengubah global yang ada untuk dengan cepat mengubah hal-hal seperti mengaktifkan atau menonaktifkan sistem sandang fleksibel, sudut bundar, gradien dll:

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

Sudut bundar secara enableddefault.

Jika Anda lebih suka mengkompilasi Bootstrap 4 menggunakan Sass dan Anda sendiri _custom.scssseperti saya (atau menggunakan penyesuai resmi), mengganti variabel terkait sudah cukup:

$enable-rounded : false

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

Atau tentukan mixin dan sertakan di mana pun Anda ingin tombol yang tidak dikelilingi.

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

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

Saat menggunakan Bootstrap> = 3.0file sumber ( SASSatau LESS) Anda tidak harus menyingkirkan sudut-sudut bulat pada segalanya jika hanya ada satu elemen yang mengganggu Anda, misalnya, untuk hanya menyingkirkan sudut-sudut bulat di navbar, menggunakan:

Dengan SCSS:

$navbar-border-radius: 0;

Dengan KURANG:

@navbar-border-radius: 0;

Namun, jika Anda ingin menyingkirkan sudut-sudut bulat pada segalanya, Anda dapat melakukan apa yang @ adamwong246 sebutkan dan gunakan:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Kedua pengaturan tersebut adalah pengaturan "root" dari mana pengaturan lain navbar-border-radiusakan mewarisi dari kecuali nilai-nilai lain ditentukan.

Untuk daftar, semua variabel periksa variable.less atau variable.scss

Kode yang diposting di atas oleh @BrunoS tidak berfungsi untuk saya,

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

apa yang saya gunakan adalah

* {
  border-radius: 0 !important;
}

Saya harap ini membantu seseorang

Ada cara yang sangat mudah untuk menyesuaikan Bootstrap:

1. Cukup buka http://getbootstrap.com/customize/
2. Temukan semua "radius" dan modifikasi sesuai keinginan Anda.
3. Klik "Kompilasi dan Unduh" dan nikmati Bootstrap versi Anda sendiri.

Atau Anda dapat menambahkan ini ke html elemen yang ingin Anda hapus radius perbatasannya (dengan cara ini Anda tidak akan menghapusnya dari semua tombol / elemen):

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

Dengan SASS Bootstrap - jika Anda mengkompilasi sendiri Bootstrap - Anda dapat mengatur semua radius batas (atau lebih spesifik) menjadi nol:

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

Bootstrap memiliki kelas sendiri untuk perbatasan termasuk .rounded-0untuk menyingkirkan sudut membulat pada elemen apa pun termasukbuttons

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>

Anda mungkin juga ingin melihat di FlatStrap . Ini menyediakan pengganti Metro-Style untuk Bootstrap CSS tanpa sudut bulat, gradien dan drop shadow.

jika Anda menggunakan bootstrap, Anda cukup menggunakan bootstrap class = "rounded-0" untuk membuat batas dengan tepi yang tajam tanpa sudut yang membulat <button class="btn btn-info rounded-0"">Generate</button></span>

Saya telah membuat file css lain dan menambahkan kode berikut Tidak semua elemen disertakan

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