Twitter 부트스트랩의 둥근 모서리를 모두 제거하기

Twitter 부트스트랩의 둥근 모서리를 모두 제거하기

트위터 부트스트랩 2.0 너무 좋아요 - 완전한 라이브러리가 너무 좋아요...하지만 저는 부츠트랩의 둥근 모서리를 모두 없애버리는 매우 박시한 원형이 아닌 사이트에 대한 전세계적인 수정을 하고 싶습니다.

CSS가 너무 많아요.글로벌 스위치가 있습니까? 아니면 모든 라운드 스위치를 찾아 교체하는 가장 좋은 방법은 무엇입니까?

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

* {
  border-radius: 0 !important;
}

나중에 덮어쓰기 싫기 때문에 !important를 사용합니다.

적은 파일을 컴파일하지 않을 경우 다음 작업만 수행합니다.

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

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

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

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

$enable-rounded:   false;

소스 다운로드.less파일과 make the..border-radius()공란으로 섞다

부트스트랩 버전 < 3을 사용하는 경우...

sass/scss 포함

$baseBorderRadius: 0;

적음으로

@baseBorderRadius: 0;

부트스트랩을 가져오기 전에 이 변수를 설정해야 합니다.이는 모든 웰 및 탐색 막대에 영향을 미칩니다.

갱신하다

부트스트랩 3 베이스를 사용하는 경우 보더 반경은 경계-반지름-베이스여야 합니다.

모든 것을 다시 컴파일하지 않으려면 다음을 추가합니다..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;
}

부트스트랩에는 국경을 위한 자체 클래스가 있습니다..rounded-0다음을 포함한 모든 요소의 둥근 모서리를 제거합니다.buttons

https://getbootstrap.com/docs/4.4/utilities/borders/ #국경-

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

이 질문은 꽤 오래된 질문이지만 부트스트랩 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와 당신만의 것을 사용하여 부트스트랩 4를 컴파일하는 것을 선호한다면._custom.scss나처럼(또는 공식 커스터마이저를 사용하는 것으로) 관련 변수를 재정의하는 것으로 충분합니다.

$enable-rounded : false

직접 부트스트랩을 컴파일하는 경우 SASS 부트스트랩을 사용하면 모든 테두리 반경(또는 보다 구체적인)을 단순히 0으로 설정할 수 있습니다.

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

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

부트스트랩 사용시 >=3.0원본 파일(SASS아니면LESS) 예를 들어 탐색바의 둥근 모서리를 제거하는 것과 같이 여러분을 성가시게 하는 요소가 하나만 있다면 모든 것의 둥근 모서리를 제거할 필요는 없습니다.

SCSS 사용:

$navbar-border-radius: 0;

LESS 포함:

@navbar-border-radius: 0;

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

$baseBorderRadius: 0;
@baseBorderRadius: 0;

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

목록의 경우 모든 변수는 variable.less 또는 variable.scss를 확인합니다.

@BrunosS가 위에 올린 코드는 저에게 맞지 않았습니다.

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

내가 사용한 것은

* {
  border-radius: 0 !important;
}

누군가에게 도움이 되었으면 좋겠습니다.

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

1. http://getbootstrap.com/customize/ 로 이동하기만 하면 됩니다.
2. 모든 "반지름"을 찾아서 원하는 대로 수정합니다.
3. "컴파일 및 다운로드"를 클릭하면 자신만의 부트스트랩 버전을 즐길 수 있습니다.

부트스트랩을 사용하는 경우에는 부트스트랩 클래스=" rounded-0"을 사용하여 모서리가 둥글지 않은 날카로운 모서리로 테두리를 만들 수 있습니다.<button class="btn btn-info rounded-0"">Generate</button></span>

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

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

플랫 스트랩도 한 번 보실 수 있습니다.둥근 모서리, 그라디언트, 드롭 섀도우가 없는 부트스트랩 CSS를 메트로 스타일로 대체할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/9742166/getting-rid-of-all-the-rounded-corners-in-twitter-bootstrap