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

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

---

방금 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"

---

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"

To use Bootstrap 4 css files, you can simply use the CDN, and use the following link in the of your HTML file:

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

This will provided you with the basics of Bootstrap 4. However if you would like to use the majority of Bootstrap 4 components, including tooltips, popovers, and dropdowns, then you are best to use the following code instead:

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

Alternatively, you can install Bootstrap using NPM, or Bower, and link to the files there.

*Note that the bottom tag of the three is the same as the first tag in the first link path.

A full working example, could be :

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

In the above example, the image is centered by using the Bootstrap auto margin on left and right.

---

If you're using Bootstrap Sass, here's another way that avoids having to add extra classes to your element markup:

@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);
}

참고URL : https://stackoverflow.com/questions/12084121/correct-way-to-create-rounded-corners-in-twitter-bootstrap