Comment créer une bordure arrondie autour d'un div avec bootstrap?

Je suis en utilisant bootstrap 3. Le type d'entrée=les éléments de texte sont cool. Maintenant, je voudrais créer un semblable aux bords arrondis autour d'un élément div. Tout ce que j'ai essayé semble laid, Est-il possible avec bootstrap 3?

Merci d'avance

  • Pouvez-vous nous montrer ce que vous avez essayé?
  • Essayez cette blogsh.de/tag/bootstrap-less
  • Cela n'a rien à voir avec bootstrap. Juste ajouter border-radius: 5px à un div.
InformationsquelleAutor g.pickardou | 2014-09-26
  1. 9

    Puisque vous êtes en essayant d'imiter un bootstrap entrée, @James Lawruk la suggestion de l'aide .form-control est la plus rapide, la plus simple façon de le faire.

    Mais si vous voulez apprendre à imiter le style que vous voyez ailleurs (qui doit), vous devez inspecter le css utilisé .formulaire de contrôle (si sur Chrome, clic droit et "inspecter l'élément"), copier le style, et de créer votre propre classe à appliquer.

    Dans ce cas:

    .form-control{
  display: block;
  width: 100%; /* THIS */
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555; /* THIS */
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc; /* THIS */
  border-radius: 4px; /* THIS */
}

    devient

    .custom{
  width: 100%;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 4px;
}

    NOTE: je suis en ignorant les quelques pseudo-classes sont également attachés .forme de contrôle, comme :focus, mais les pseudo-éléments sont une autre raison pour laquelle vous pourriez ne pas vouloir appliquer une classe qui a été conçu pour un autre but.

    • De bons conseils, Shawn.
    InformationsquelleAutor Shawn Taylor
  2. 10

    De faire rapidement un div ressembler à un Bootstrap d'entrée, il suffit d'ajouter un .form-control classe à votre div.

    <div class="form-control">I am inside a div.</div>

    Également vérifier Bootstrap Panneaux. Depuis les divs ne sont pas des contrôles de formulaire, panneaux d'interprétation ont des coins arrondis et sont plus appropriés pour les divs. 

    <div class="panel panel-default">
    <div class="panel-body">I am inside a panel.</div>
</div>

    Voici un JSFiddle de démonstration de ces deux options.

    • defintiely la façon la plus rapide de le faire!
    InformationsquelleAutor James Lawruk