Twitter Bootstrap에서 둥근 모서리를 만드는 올바른 방법

79

방금 Twitter Bootstrap으로 시작했는데 여기에 한 가지 질문이 있습니다.

사용자 정의 <header>블록을 만들고 있으며 하단 모서리가 둥글게 만들고 싶습니다.

미리 정의 된 클래스를 사용하여이 작업을 수행하는 "올바른"방법이 있습니까, 아니면 다음과 같이 수동으로 지정해야합니다.

border-radius: 10px;               // and all that cross-browser trumpery

지금은 css스타일을 사용하고 있습니다. less그 문제 에 사용 하는 것이 더 좋을까요?

twitter-bootstrap  less  css 
— 에드워드 루체 비츠
소스
최근에 이것을 확인하십시오 왼쪽 제곱 오른쪽 둥글게, 희망 도움이 누군가
— Shaiju T
나는 '미리 정의 된 클래스'에 의해 클래스를 추가하고 <header>모서리를 둥글게 만들고 일반적으로 부트 스트랩처럼 보이게 만들고 싶다고 가정합니다 . 방법은 다음과 같습니다. stackoverflow.com/a/29383075/1450294
— Michael Scheper

답변:

67

나는 그것이 당신이 찾고있는 것이라고 생각합니다 : http://blogsh.de/tag/bootstrap-less/

@import 'bootstrap.less';
div.my-class {
    .border-radius( 5px );
}

mixin이 있기 때문에 사용할 수 있습니다.

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

Bootstrap 3의 경우 사용할 수있는 믹스 인이 4 개 있습니다.

.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);

또는 상위 4 개를 사용하여 자신 만의 믹스 인을 만들어 한 번에 할 수 있습니다.

.border-radius(@radius){
    .border-top-radius(@radius);
    .border-right-radius(@radius);
    .border-bottom-radius(@radius);
    .border-left-radius(@radius);
}
— 다닐 스페 란 스키
소스
6
그래서 나는 less그것을 사용해야 하고 그것은 불가능 bootstrap.css합니까?
— Edward Ruchevits 2012-08-23
Bootstrap3에는 그러한 믹스 인이 없습니다.
— Kolyunya 2014 년
1
'미리 정의 된 클래스'에 대한 질문입니다. 여기에서 클래스를 만듭니다. 미리 정의 된 클래스에 대한 답변을 참조하십시오. stackoverflow.com/a/29383075/1450294
— Michael Scheper
각 부트 스트랩 3 바로 가기 믹스 인 (.border-top-radius, .border-right-radius 등)은 2 개의 모서리를 둥글게하므로 왼쪽과 오른쪽 만 사용하거나 상단을 사용하여 .border-radius 믹스 인을 통해 4 개를 모두 둥글게 할 수 있습니다. 그리고 바닥. 또한 적절한 조합을 통해 3 개의 모서리를 둥글게 할 수 있습니다. 예를 들어 상단과 왼쪽은 왼쪽 하단, 왼쪽 상단 및 오른쪽 상단을 둥글게합니다.
— 케빈 Jhangiani
크롬은 blogsh.de 사이트에 대한 악성 코드 경고를 제공합니다
— STEF
17

부트 스트랩은 크고 유용하지만 단순한 CSS 파일 일뿐입니다. 프레임 워크 나 재정의 할 수없는 것은 아닙니다. 나는 많은 개발자들이 BS 클래스를 고수하고 게으른 "CSS 코드를 더 이상 쓸 수 없습니다"코더가 된 것을 알았 기 때문에 이렇게 말합니다. [이것은 당연히 귀하의 경우가 아닙니다!].

필요한 기능이 있으면 Bootstrap 클래스로 이동하십시오. 그렇지 않은 경우 추가 코드를 good ol '로 작성하십시오 style.css.

두 세계를 최대한 활용하려면 LESS로 자신의 선언을 작성하고 필요에 따라 전체를 다시 컴파일하여 서버 요청을 최소화 할 수 있습니다.

— 문 웨이브 99
소스
8
물론이지. :) 자전거를 발명하고 싶지 않습니다.
— Edward Ruchevits 2012-08-23
8
당신은 평균 바퀴 : 다시 발명
— Shervin 아스 가리
52
자전거를 발명하는 것은 굉장 할 것입니다.
— OpenCoderX
3
이것은 자전거 바퀴 비유에 대한 자전거 흘리기입니까? #humour
— Obscaenvs
저는 자전거가 튀어 나올 때 일어나는 일이 걱정이라고 생각합니다. 그는 자신의 위젯이 여전히 잘 맞기를 원합니다. (내가 말하는 것은 약간의 문제로 들릴 수 있지만 모든 진지함을 의미합니다. 😏) CSS를 직접 조작 할 때의 문제점은 특히 플러그인이나 부트 스트랩 업데이트와 같이 테마가 변경되는 경우 전체 테마에 적합하지 않을 수 있다는 것입니다. . 나는 적절한 CSS 클래스를 사용하는 것이 매직 넘버를 입력하는 대신 코드에서 적절한 상수를 사용하는 것보다 더 '게으른'것이 아니라고 주장합니다.
— Michael Scheper
10

부트 스트랩 3.0 문서에 따라. div 태그에 대한 둥근 모서리 클래스 또는 ID 가 없습니다 .

사용하여 이미지에 원 동작을 사용할 수 있습니다. 

<img class="img-circle">

또는 border-radiuscss에서 사용자 정의 css3 속성을 사용하십시오.

다음과 같은 바닥 둥근 모서리 사용

border-bottom-left-radius:25%; // i use percentage  u can use pix.
border-bottom-right-radius:25%;// i use percentage  u can use pix.

반응 형 순환 div를 원한다면 이것을 시도하십시오.

반응 형 CSS 서클 에서 참조

— Sanket Shembekar
소스
10

원하는 것은 Bootstrap 패널 입니다. panel클래스를 추가하면 헤더가 균일하게 보입니다. 클래스 panel panel-info, panel panel-success등을 추가 할 수도 있습니다 . 거의 모든 블록 요소에서 작동하며 <header>에서 작동해야 하지만 대부분 <div>s 와 함께 사용될 것으로 예상합니다 .

— 마이클 셰퍼
소스
8

적지 않고 단순히 주어진 div에 대한 ans :

CSS에서 : 

.footer {
background-color: #ab0000;
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}

HTML에서 :

 <div class="footer">
        <p>blablabla</p>
      </div>
— Mcbjam
소스
4

bootstrap4를 사용하면 다음과 같이 쉽게 할 수 있습니다.

class="rounded"

또는

class="rounded-circle"
— 나 테쉬 바트
소스
0

Bootstrap Sass를 사용하는 경우 요소 마크 업에 추가 클래스를 추가하지 않아도되는 또 다른 방법이 있습니다.

@import "bootstrap/mixins/_border-radius";
@import "bootstrap/_variables";

.your-class {
  $r: $border-radius-base; // or $border-radius-large, $border-radius-small, ...
  @include border-top-radius($r);
  @include border-bottom-radius($r);
}
— Abe Voelker
소스
0

Bootstrap 4에서 요소의 경계를 지정하는 올바른 방법은 요소의 클래스 목록에서 다음과 같이 이름을 지정하는 것입니다.

For a slight rounding effect on all corners; class="rounded"
For a slight rounding on the left; class="rounded-left"
For a slight rounding on the top; class="rounded-top"
For a slight rounding on the right; class="rounded-right"
For a slight rounding on the bottom; class="rounded-bottom" 
For a circle rounding, i.e. your element is made circular; class="rounded-circle"
And to remove rounding effects; class="rounded-0"

Bootstrap 4 css 파일을 사용하려면 CDN을 사용하고 HTML 파일에서 다음 링크를 사용하면됩니다.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

그러면 Bootstrap 4의 기본 사항이 제공됩니다. 그러나 툴팁, 팝 오버 및 드롭 다운을 포함하여 대부분의 Bootstrap 4 구성 요소를 사용하려면 대신 다음 코드를 사용하는 것이 가장 좋습니다.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

또는 NPM 또는 Bower를 사용하여 Bootstrap을 설치하고 거기에있는 파일에 연결할 수 있습니다.

* 3 개의 하단 태그는 첫 번째 링크 경로의 첫 번째 태그와 동일합니다.

전체 작동 예는 다음과 같습니다.

<img src="path/to/my/image/image.jpg" width="150" height="150" class="rounded-circle mx-auto">

위의 예에서 이미지는 왼쪽과 오른쪽의 부트 스트랩 자동 여백을 사용하여 중앙에 배치됩니다.

— cm 프로그램
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.