[twitter-bootstrap] Twitter Bootstrap에서 둥근 모서리를 만드는 올바른 방법

Program / 글쓴이

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

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

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

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

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

답변

나는 그것이 당신이 찾고있는 것이라고 생각합니다 : 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);
}

답변

<div class="img-rounded"> 둥근 모서리를 제공합니다.

답변

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

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

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

답변

부트 스트랩 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 서클 에서 참조

답변

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

답변

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

CSS에서 : 

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

HTML에서 :

 <div class="footer">
        <p>blablabla</p>
      </div>

답변

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

class="rounded"

또는

class="rounded-circle"