web-dev-qa-db-fra.com

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

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 l'instant, j'utilise des styles css. Peut-être serait-il préférable d'utiliser less pour cette question?

csstwitter-bootstraplesscss3
76
Edward Ruchevits

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);
}
65
Danil Speransky

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

92
Swade

Bootstrap est juste un gros, utile, mais simple fichier CSS - pas un framework ou quelque chose que vous ne pouvez pas écraser. Je dis cela parce que j'ai remarqué que de nombreux développeurs ont gardé le bâton avec les classes de BS et sont devenus paresseux des codeurs "je ne peux plus écrire de code CSS" [ceci n'est pas votre cas bien sûr!].

Si elle contient quelque chose dont vous avez besoin, utilisez les classes Bootstrap - sinon, écrivez votre code supplémentaire en bon vieux style.css.

Pour avoir le meilleur des deux mondes, vous pouvez écrire vos propres déclarations dans LESS et recompiler le tout selon vos besoins, en minimisant les demandes de serveur en prime.

17
moonwave99

Ce que vous voulez, c'est un Bootstrap panel . Ajoutez simplement la classe panel et votre en-tête sera uniforme. Vous pouvez également ajouter les classes panel panel-info, panel panel-success, etc. Cela fonctionne pour à peu près n'importe quel élément de bloc et devrait fonctionner avec <header>, mais je suppose qu'il serait principalement utilisé avec <div>s.

10
Michael Scheper

Selon la documentation de bootstrap 3.0. il n'y a pas de coins arrondis class ni id pour div tag. 

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

<img class="img-circle">

ou utilisez simplement la propriété personnalisée border-radius css3 dans css 

pour utiliser seulement le cône arrondi inférieur suivant

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 responsive circular div alors essayez ceci

référé de Responsive CSS Cercles

10
Sanket Shembekar

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

Avec bootstrap4, vous pouvez facilement le faire comme ceci: -

class="rounded"

ou 

class="rounded-circle"
4
Natesh bhat

Dans Bootstrap 4, la méthode correcte pour délimiter vos éléments consiste à les nommer comme suit dans la liste de classes de vos éléments:

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"

Pour utiliser les fichiers Bootstrap 4 css, vous pouvez simplement utiliser le CDN et utiliser le lien suivant dans le fichier HTML:

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

Cela vous fournira les bases de Bootstrap 4. Cependant, si vous souhaitez utiliser la majorité des composants de Bootstrap 4, y compris les info-bulles, les popovers et les menus déroulants, il est préférable d'utiliser le code suivant:

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

Vous pouvez également installer Bootstrap à l'aide de NPM ou de Bower et créer un lien vers les fichiers qui s'y trouvent.

* Notez que la balise inférieure des trois est identique à la première balise du premier chemin de liaison.

Un exemple complet de travail pourrait être:

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

Dans l'exemple ci-dessus, l'image est centrée à l'aide de la marge automatique Bootstrap à gauche et à droite. 

0
cmprogram