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

Program / 글쓴이

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
}