Méthode correcte pour créer des angles arrondis dans Twitter Bootstrap

Question

Je viens de commencer avec Twitter Bootstrap et voici une question.

Je crée un bloc personnalisé <header> et je veux que ses coins inférieurs soient arrondis.

Existe-t-il un moyen "correct" de le faire en utilisant des classes prédéfinies, ou je dois le spécifier manuellement comme ceci:

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

Pour le moment, j'utilise les styles css . Peut-être vaudrait-il mieux utiliser less pour cette question?

Answer 1

<div class="img-rounded"> vous donnera des coins arrondis.

Answer 2

Je suppose que c'est ce que vous recherchez: http://blogsh.de/tag/bootstrap-less/

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

Vous pouvez l'utiliser parce qu'il y a un mixin:

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

Pour Bootstrap 3, il y a 4 mixins que vous pouvez utiliser ...

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

ou vous pouvez faire votre propre mixin en utilisant le top 4 pour le faire en un coup.

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

Answer 3

Bootstrap est juste un grand, d'utile, mais simple fichier CSS - pas un cadre ou tout ce que vous ne pouvez pas remplacer. Je dis cela parce que j'ai remarqué de nombreux développeurs se sont coller avec BS classes et est devenu paresseux "je-ne-écrire-CSS-code-plus" codeurs [ce qui n'est pas votre cas, bien sûr!].

Si elle comporte quelque chose dont vous avez besoin, aller avec Bootstrap classes - si non, aller écrire votre code supplémentaire dans le bon ol' style.css.

D'avoir le meilleur des deux mondes, vous pouvez écrire vos propres déclarations en MOINS et recompiler le tout en fonction de vos besoins, réduisant la demande de serveur comme un bonus.

Answer 4

Comme par bootstrap 3.0 documentation. il n'y a pas de coins arrondis classe ou l'id de la div tag.

vous pouvez utiliser le cercle de comportement pour l'image en utilisant des

<img class="img-circle"> 

ou simplement l'utiliser personnalisée border-radius propriété css3 css

pour seulement bas arrondi coner la suite de la

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

si vous voulez sensible circulaire div ensuite, essayez ceci

visée de Responsive CSS Cercles

Answer 5

Sans moins, simplement pour une div donnée:

Dans un css:

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

En html:

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