Twitter Bootstrap의 모든 둥근 모서리를 제거

Twitter Bootstrap 2.0을 좋아합니다-완벽한 라이브러리 인 방법을 좋아합니다 ... 매우 둥글 지 않은 사이트에 대한 전역 수정을 원합니다 .Bootstrap의 모든 둥근 모서리를 제거하고 싶습니다 ...

그것은 CSS를 많이 사용합니다. 글로벌 스위치가 있습니까, 아니면 모든 라운드를 찾고 교체하는 가장 좋은 방법은 무엇입니까?

다음과 같이 모든 요소의 경계 반경을 "0"으로 설정했습니다.

* {
  border-radius: 0 !important;
}

나중에 이것을 덮어 쓰지 않으려면 확실하게! important를 사용하십시오.

적은 파일을 컴파일하지 않으면 다음을 수행하십시오.

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

부트 스트랩 3에서 컴파일하는 경우 variables.less 파일에서 반경을 설정할 수 있습니다.

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

부트 스트랩 4에서 컴파일하는 경우 _custom.scss파일 에서 반경을 모두 비활성화 할 수 있습니다 .

$enable-rounded:   false;

소스 .less파일을 다운로드하고 .border-radius()믹스 인을 비 웁니다.

Bootstrap 버전 <3을 사용하는 경우 ...

sass / scss로

$baseBorderRadius: 0;

적은

@baseBorderRadius: 0;

부트 스트랩을 가져 오기 전에이 변수를 설정해야합니다 . 이것은 모든 우물과 탐색 표시 줄에 영향을 미칩니다.

최신 정보

부트 스트랩 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;
}

이 질문은 꽤 오래되었지만 부트 스트랩 4 에서도 검색 엔진에서 잘 보입니다. 관련 검색 . BS4 방식으로 둥근 모서리를 비활성화하는 것에 대한 답변을 추가 할 가치가 있다고 생각합니다.

여기에는 _variables.scss플렉스 거더 시스템 활성화 또는 비활성화, 둥근 모서리, 그라디언트 등을 신속하게 변경하기 위해 몇 가지 전역 수정자가 있습니다.

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

둥근 모서리가 enabled기본적으로 사용됩니다.

Sass를 사용하여 _custom.scss나 자신 과 같은 (또는 공식 사용자 정의 프로그램을 사용하여) Bootstrap 4를 컴파일 하려면 관련 변수를 재정의하면 충분합니다.

$enable-rounded : false

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

또는 믹스 인을 정의하고 둥근 버튼을 원할 때마다 믹스 인을 포함하십시오.

@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)을 사용할 때, 예를 들어, 네비게이션 바의 둥근 모서리를 제거하기 위해 당신을 괴롭히는 요소가 하나뿐이라면 모든 것에 둥근 모서리를 제거 할 필요가 없습니다. 사용하다:

SCSS 사용시 :

$navbar-border-radius: 0;

적은 :

@navbar-border-radius: 0;

그러나 모든 것에 둥근 모서리를 없애고 싶다면 @ adamwong246이 언급 한 것을 사용하고 사용할 수 있습니다.

$baseBorderRadius: 0;
@baseBorderRadius: 0;

이 두 설정은 navbar-border-radius다른 값을 지정하지 않는 한 다른 설정 이 상속 되는 "루트"설정입니다 .

모든 변수 목록을 보려면 variables.less 또는 variables.scss를 확인하십시오.

@BrunoS가 위에 게시 한 코드는 저에게 효과적이지 않았습니다.

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

내가 사용한 것은

* {
  border-radius: 0 !important;
}

나는 이것이 누군가를 돕기를 바랍니다.

부트 스트랩을 사용자 정의하는 매우 쉬운 방법이 있습니다.

1. http://getbootstrap.com/customize/ 로 이동하십시오.
2. 모든 "반지름"을 찾아 원하는대로 수정하십시오.
3. "컴파일 및 다운로드"를 클릭하고 자신의 Bootstrap 버전을 즐기십시오.

또는 테두리 반경을 제거하려는 요소의 HTML에 이것을 추가 할 수 있습니다 (이렇게하면 모든 버튼 / 요소에서 제거하지 않을 것입니다).

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

SASS Bootstrap을 사용하면 Bootstrap을 직접 컴파일하는 경우 모든 경계 반경 (또는보다 구체적인)을 간단히 0으로 설정할 수 있습니다.

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

부트 스트랩에는 테두리를 포함 .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을 살펴볼 수도 있습니다 . 둥근 모서리, 그라디언트 및 그림자없이 부트 스트랩 CSS를 메트로 스타일로 대체합니다.

부트 스트랩을 사용하는 경우 부트 스트랩 class = "rounded-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;
}