html - ejemplo - Rejilla bootstrap para impresión.
title html (8)
Me gustaría diseñar una página de informe con un diseño diferente para imprimir en dispositivos móviles. Estoy usando bootstrap v3. Parece que la cuadrícula no puede diferenciar entre los dos, ya que el punto de interrupción para la impresión es el mismo que el punto de interrupción para dispositivos móviles (xs)
Por ejemplo: en la siguiente prueba html mi página impresa (o vista previa de impresión) muestra las columnas xs6 una al lado de la otra, pero las columnas sm6 apiladas. No hay un punto de interrupción entre xs y sm.
Seguramente, mi página impresa es más ancha que la de mi ventana móvil, ¿no debería usar el diseño sm?
¿Estoy haciendo algo mal o es así? ¿Hay un ancho de ventana gráfica para imprimir?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
xs6
</div>
<div class="col-xs-6">
xs6
</div>
</div>
<div class="row">
<div class="col-sm-6">
sm6
</div>
<div class="col-sm-6">
sm6
</div>
</div>
</div>
</body>
</html>
La versión Sass de la solución Fredy31:
@for $i from 1 through 12 {
.col-print-#{$i} {
width: #{percentage(round($i*8.33)/100)};
float: left;
}
}
Lo que hice fue recrear manualmente esas clases de columnas en mi css de impresión.
.col-print-1 {width:8%; float:left;}
.col-print-2 {width:16%; float:left;}
.col-print-3 {width:25%; float:left;}
.col-print-4 {width:33%; float:left;}
.col-print-5 {width:42%; float:left;}
.col-print-6 {width:50%; float:left;}
.col-print-7 {width:58%; float:left;}
.col-print-8 {width:66%; float:left;}
.col-print-9 {width:75%; float:left;}
.col-print-10{width:83%; float:left;}
.col-print-11{width:92%; float:left;}
.col-print-12{width:100%; float:left;}
Luego solo uso esas clases como uso las clases de bootstrap para hacer que mis columnas solo se impriman. También creé .visible-print y .hidden-print para ocultar / mostrar elementos solo en la versión impresa.
Todavía necesita algo de trabajo, pero ese parche rápido me ayudó mucho.
Lo siguiente funciona muy bien para crear elementos de cuadrícula específicos para medios impresos. Utilizando Bootstrap 3.
@media print {
.make-grid(print);
}
A continuación, puede utilizar todos los elementos de la columna de cuadrícula con la palabra clave print . Ej: col-print-6 col-print-offset-2 , etc.
Si desea que la cuadrícula de Bootstrap no se imprima con col-xs (configuración móvil), y desea usar col-sm-? en su lugar, según la respuesta de Fredy31 y ni siquiera es necesario definir col-print - ??. simplemente reescribir todo col-md- ?? css definiciones de clase dentro de a: @media print {/ * copie y pegue desde bootstrap.css * /} así:
@media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
}
Sus estilos de cambio como este
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Ver
#grid-example-mixed o #grid-example-mixed-complete
y puede que necesites aclarar
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
Tal vez podría usar Bootstrap 2. Si está familiarizado con Bootstrap 2, entonces puede usarlo como una alternativa, ya que ofrece CSS sin respuesta. Bootstrap 2 no era móvil primero, tenía que agregar una hoja de estilo adicional para hacer que sus páginas web respondan.
O puede agregar clearfixes para la parte móvil. Ver #grid-responsive-resets
Tuve un problema similar, para mí, la solución más sencilla fue modificar manualmente el ancho de los elementos que quería que parecieran diferentes cuando se imprimieron (y agregué una clase específica, en mi caso: título-contenedor, detalles-contenedor para esos, a lo largo del col-xs-6 etc.).
Por ejemplo:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-3 col-sm-6 col-md-6 title-container">
Some stuff
</div>
<div class="col-xs-12 col-ms-9 col-sm-6 col-md-6 details-container">
Some more stuff
</div>
</div>
</div>
</div>
@media print {
.title-container {
width: 360px;
float: left;
}
.details-container {
width: 300px;
float: right;
}
}
En mi caso, necesitaba una columna flotante a la derecha, una a la izquierda, por lo tanto, los flotadores ... Usted podría establecer en su css personalizado el ancho también para .col-xs-6, etc., solo una solución rápida y sucia , pero hice el trabajo para una página donde necesitaba esto ...
Y la versión SASS de la respuesta de Ehsan Abidi utilizando la respuesta de MiCc83:
@for $i from 1 through 12 {
.col-sm-#{$i} {
width: #{percentage(round($i*8.33)/100)};
float: left;
}
}
Prefiero esto porque siempre especifico el tamaño "sm" y eso se acerca más a una página de impresión en mis aplicaciones. Entonces solo necesito agregar algo específicamente para imprimir cuando tengo una condición de valor atípico.