css - form - colors bootstrap 3

Ajuste de Bootstrap 2.0 para el marcado semántico

Question

La versión 2 de Twitters "Bootstrap" UI framework fue lanzada hoy. Si bien me parece muy útil, no me gusta lo no semántico que es.

Prefiero evitar establecer clases como .span6 .table-striped en mi HTML.

Ya que Bootstrap se basa en menos, espero que haya una buena manera de usar una hoja menos específica del proyecto que pueda aprovechar los mixins para atribuir la bondad definida por bootstrap a los buenos nombres de clases semánticas.

Cloné bootstrap.less en myproject.less, y ajusté las rutas en las líneas @import, luego agregué lo siguiente en la parte inferior:

#call-to-action {
    .span6;
}

Pero Lessc se ahoga con eso, y se queja de que:

.span6 is undefined in

De manera similar, intentar .columns (6) produce el mismo error (".columns no está definido").

Otros mix-ins, como .table, .table-bordered, etc, parecen funcionar bien.

¿Qué me estoy perdiendo? ¿Cuáles son las mejores prácticas para usar bootstrap mientras mantengo los nombres de las clases no semánticas fuera de mi marcado semántico?

Answer 1

Aquí hay un artículo que hace referencia a una gist en git.

Este artículo está intentando ir un paso más allá y resolver el problema de que los mecanismos de respuesta predeterminados en Bootstrap se pierden cuando mueve las clases fuera de su página.

Bootstrap con menos

Utiliza una mezcla personalizada para tratar de crear clases para diferentes anchos de página de punto de interrupción.

Me gustaría dar mi opinión aquí, pero todavía no he decidido qué es: - /

Answer 2

Estoy usando sass-bootstrap con la función @extend.
pero funciona horrible :-(

.my-top {
    @extend .span4;
}
.left-top {
    @extend .span4;
}
.right-top {
    @extned .span4;
}

ni siquiera en una fila ...

===

¡Oh! Encontré mi respuesta en esta página:
¿Cómo usar el bootstrap de twitter con la aplicación bootstrap-sass in rails?

Answer 3

Lo que funcionó para mí: crear un archivo .less.

Vaya a https://github.com/twitter/bootstrap/blob/master/less/mixins.less y copie .span *, .row, .offset * etc. en el archivo que creó. A continuación, utilice el como este:

myfile.css.less:

...<snip>...
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
...<snip>...
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
...<snip>...

#page_footer {
    .about {
      .span4;
      .offset10;
    }
}

Answer 4

No esté de acuerdo con la respuesta de que debe "simplemente darse por vencido" y "hacerlo de la manera más fácil"; manipular las clases en el marcado no es la forma más fácil. Por ejemplo: cuando su sitio se ve en un teléfono móvil, ¿qué es class = "span4"?

Uso https://github.com/vwall/compass-twitter-bootstrap porque parece ser el puerto más actualizado de Twitter Bootstrap to Sass.

Esta biblioteca es excelente porque tiene el prefijo para evitar el conflicto de nombres de mezcla. Es fácil de usar para la creación de prototipos y, luego, puede crecer rápidamente a partir de él, al igual que Bootstrap estaba destinado a ser utilizado.

Answer 5

Para el nuevo Bootstrap 2.1 (tal vez funciona en 2.0):

.content{ .makeRow();
   .main-content{ .makeColumn(5,2);} // (size,offset)
   .sidebar{ .makeColumn(3); }
}

¡Finalmente funciona!

Answer 6

Si usa rieles puede usar sass-bootstrap , entonces puede usar mixins

Answer 7

ok en menos, así es como lo descubrí. Es lo mejor que pude hacer, y no pude averiguar cómo lidiar con .row semánticamente, pero bueno.

Básicamente, creé un custom-mixins.less y creé un mixin llamado .col y la variable es @col. Entonces cuando escribes tu selector y haces algo como .col (3); .col (4); .col (5); o algo así. Debe crear el ancho adecuado. No sé cómo funcionaría esto para columnas anidadas.

//custom-mixins.less
.col (@col) {
  #gridSystem > .gridColumn(@gridGutterWidth);
  #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);
}

//styles.less
.greetings {
  .col(3);
}

lessc generará lo siguiente en styles.css

//styles.css
.greetings {
  float: left;
  margin-left: 20px;
  width: 220px;
}

Answer 8

Less proporciona mixins, lo que significa que si escribe sus hojas de estilo en Less en lugar de CSS, puede incluir las clases de Bootstrap en su hoja de estilo en lugar de en su HTML.

¡Por favor, deja de incrustar clases de Bootstrap en tu HTML!