Pregunta Forma correcta de crear esquinas redondeadas en Twitter Bootstrap


Acabo de comenzar con Twitter Bootstrap y aquí hay una pregunta.

Estoy creando personalizado <header> bloquear, y quiero que se redondeen las esquinas inferiores.

¿Hay alguna forma "correcta" de hacer esto mediante el uso de clases predefinidas, o tengo que especificarlo manualmente como:

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

Por ahora, estoy usando css estilos. Tal vez será mejor usar less para ese problema?


74
2017-08-23 02:55


origen


Respuestas:


Supongo que es lo que estás buscando: http://blogsh.de/tag/bootstrap-less/

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

Puedes usarlo porque hay un mixin:

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

Para Bootstrap 3, hay 4 mixins que puedes usar ...

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

o puedes hacer tu propio mixin usando los 4 mejores para hacerlo de una vez.

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

62
2017-08-23 03:00



<div class="img-rounded"> te dará esquinas redondeadas.


91
2018-01-11 00:00



Bootstrap es simplemente grande, útil, pero simple Archivo CSS - No es un marco ni nada que no puedas anular. Digo esto porque me he dado cuenta de que muchos desarrolladores se quedaron con las clases de BS y se convirtieron en codificadores perezosos de "no puedo escribir código CSS más" [¡este no es su caso, por supuesto!].

Si tiene algo que necesitas, ve con las clases de Bootstrap; de lo contrario, escribe tu código adicional en buen ol ' style.css.

Para tener lo mejor de ambos mundos, puede escribir sus propias declaraciones en LESS y recompilar todo en función de sus necesidades, minimizando la solicitud del servidor como una bonificación.


17
2017-08-23 03:18



Según la documentación de bootstrap 3.0. no hay esquinas redondeadas clase o carné de identidad para div etiqueta.

puedes usar el comportamiento del círculo para la imagen usando

<img class="img-circle"> 

o simplemente usa personalizado border-radius css3 propiedad en css

para el uso del coner redondeado inferior solamente siguiente

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 tu quieres sensible Div circular entonces prueba esto

remitidos desde Círculos CSS receptivos 


10
2017-09-30 14:38



Lo que quieres es un Bootstrap panel. Solo agregue el panel clase, y su encabezado se verá uniforme. También puedes agregar clases panel panel-info, panel panel-success, etc. Funciona prácticamente para cualquier elemento de bloque, y debería funcionar con <header>, pero espero que se use principalmente con <div>s.


10
2018-04-01 04:50



Sin menos, ans simplemente por un div dado:

En 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
2018-04-18 15:42



Con bootstrap4 puedes hacerlo fácilmente así:

class="rounded" 

o

class="rounded-circle"

3
2017-12-03 18:35



Si estás usando Bootstrap Sass, aquí hay otra manera que evita tener que agregar clases adicionales al marcado de su elemento:

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

-1
2018-02-14 22:32