Twitter Bootstrap'taki tüm yuvarlak köşelerden kurtulmak

Twitter Bootstrap 2.0'ı seviyorum - Nasıl bu kadar eksiksiz bir kütüphane olduğunu seviyorum ... Ama Bootstrap'deki tüm yuvarlak köşelerden kurtulmak için çok kutulu olmayan bir site için küresel bir değişiklik yapmak istiyorum ...

Bu, kontrol edilmesi gereken çok fazla CSS. Küresel bir anahtar var mı, yoksa tüm yuvarlakları bulmak ve değiştirmek için en iyi yol ne olabilir?

Tüm elemanın kenarlık yarıçapını "0" olarak şöyle ayarladım:

* {
  border-radius: 0 !important;
}

Eminim ki daha sonra bunun üzerine yazmak istemiyorum, sadece!

Daha az dosyalarınızı derlemiyorsanız:

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

Bootstrap 3'te derliyorsanız, şimdi variable.less dosyasında yarıçapı ayarlayabilirsiniz:

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

Bootstrap 4'te derliyorsanız, _custom.scssdosyadaki yarıçapı tamamen devre dışı bırakabilirsiniz :

$enable-rounded:   false;

Kaynağı indir .less dosyaları ve .border-radius()karışımı boş bırakın.

Bootstrap sürümü <3 kullanıyorsanız ...

Sass / scss ile

$baseBorderRadius: 0;

Daha az ile

@baseBorderRadius: 0;

Bootstrap'i içe aktarmadan önce bu değişkeni ayarlamanız gerekir . Bu tüm kuyuları ve navbarları etkileyecektir.

Güncelleme

Eğer Bootstrap 3 kullanıyorsanız baseBorderRadius olmalıdır border-radius-baz

Her şeyi yeniden derlemekten kaçınmak istiyorsanız, sadece CSS'nize ekleyin .btn {border-radius: 0;}.

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

Bu soru oldukça eski ancak Bootstrap 4'te bile arama motorlarında son derece görünür ile ilgili aramalarda . Bence yuvarlatılmış köşeleri devre dışı bırakmak için bir cevap eklemeye değer, BS4 yolu.

Gelen _variables.scssbirçok küresel değiştiricileri hızlı bir şekilde sağlayan ve yokuş vb esnek gird sistemi, yuvarlatılmış köşeler, devre dışı bırakma gibi şeyler değiştirmek için var vardır:

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

Yuvarlatılmış köşeler enabledvarsayılan olarak vardır.

Bootstrap 4'ü Sass ve _custom.scssbenim gibi kendiniz (veya resmi özelleştirici kullanarak) derlemeyi tercih ediyorsanız , ilgili değişkeni geçersiz kılmak yeterlidir:

$enable-rounded : false

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

Veya bir mixin tanımlayın ve yuvarlak bir düğme istediğiniz yere ekleyin.

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

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

Bootstrap> = 3.0kaynak dosyalarını ( SASSveya LESS) kullanırken, örneğin sizi navbardaki yuvarlak köşelerden kurtulmak için sizi rahatsız eden tek bir öğe varsa, her şeydeki yuvarlak köşelerden kurtulmanız gerekmez, kullanın:

SCSS ile:

$navbar-border-radius: 0;

DAHA AZ ile:

@navbar-border-radius: 0;

Bununla birlikte, her şeydeki yuvarlak köşelerden kurtulmak istiyorsanız, @ adamwong246'nın bahsettiği şeyi yapabilir ve kullanabilirsiniz:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Bu iki ayar, navbar-border-radiusdiğer değerler belirtilmedikçe diğer ayarların devralınacağı "kök" ayarlarıdır .

Bir liste için tüm değişkenler variable.less veya variable.scss dosyasına bakın.

Yukarıda @BrunoS tarafından gönderilen kod benim için çalışmadı,

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

ne kullandım

* {
  border-radius: 0 !important;
}

Umarım bu birine yardım eder

Bootstrap'i özelleştirmenin çok kolay bir yolu var:

1. Http://getbootstrap.com/customize/ adresine gitmeniz yeterlidir.
2. Tüm "yarıçapı" bulun ve istediğiniz gibi değiştirin.
3. "Derle ve İndir" e tıklayın ve kendi Bootstrap sürümünüzün keyfini çıkarın.

Veya kenarlık yarıçapını kaldırmak istediğiniz öğenin html'sine ekleyebilirsiniz (bu şekilde tüm düğmelerden / öğelerden kaldırmazsınız):

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

SASS Bootstrap ile - Bootstrap'i kendiniz derliyorsanız - tüm kenarlık yarıçapını (veya daha spesifik) basitçe sıfıra ayarlayabilirsiniz:

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

Bootstrap dahil sınırları için, bu kendi sınıfları vardır .rounded-0dahil herhangi bir öğeye ait yuvarlatılmış köşeler kurtulmak içinbuttons

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'a da göz atmak isteyebilirsiniz . Yuvarlatılmış köşeler, degradeler ve alt gölgeler olmadan Bootstrap CSS için Metro Stili değiştirme sağlar.

bootstrap kullanıyorsanız, bootstrap class = "rounded-0" öğesini kullanarak köşeleri yuvarlatılmış keskin kenarlara sahip kenarlık yapabilirsiniz <button class="btn btn-info rounded-0"">Generate</button></span>

Başka bir css dosyası oluşturup aşağıdaki kodu ekledim Tüm öğeler dahil değil

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