Tips para Bootstrap 3 Drupal 7

Ruth Rocha BustamanteSupersoft

Responsive ImagesLas imágenes en Bootstrap 3 se pueden hacer responsivas agregando esta clase img­responsive. al tag <img>

- Añadir la función preprocess en template.php,    ubicado en: site/all/themes/mitema/.

<?php/****/function mitema_preprocess_image_style(&$vars)

{$vars['attributes']['class'][] =    'img­responsive'; }

?>

Responsive Video  

Para hacer responsivos nuestros videos se debe agregar en nuestros archivo mitema.less ubicado en: site/all/themes/mitema/less el siguiente código:

.player {  clear: both;  overflow:hidden;  padding­bottom:56.25%;  padding­top: 60px;   position:relative;  height:0;}.player iframe,.player object,.player embed {  left:0;  top:0;  height:100%;  width:100%;  position:absolute;}

Responsive Tables

El contenido de la tabla se desplazará horizontalmente en dispositivos pequeños (menores a 768px).

Para crear tablas responsivas:

-Agregar un div con la clase table­responsive que contenga a <table>

-Agregar la clase table al tag <table>

El marcado que obtendremos una ves agregada las clases es el siguiente: 

<div class="table­responsive">  <table class="table">  .....  </table></div>

Para agregar las clases:- Crear un archivo mitema.js en site/all/themes/mitema/js y agregar el siguiente código:

(function($) {Drupal.behaviors.mitemaBehavior = {  attach: function (context, settings) {    //code starts    $("table").addClass('table');    $('.table').wrap('<div  

class="table­responsive"></div>');    //code ends  }};})(jQuery);

Modificar el número de columnas en bootstrap 3 drupal 7

-Añadir una función en template.php, ubicado en sites/all/themes/mitema/

function mitema_preprocess_page(&$variables) {  if (!empty($variables['page']     ['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {    $variables['content_column_class']     = ' class="col­sm­4"';

}elseif (!empty($variables['page'] ['sidebar_first']) || !

empty($variables['page']['sidebar_second'])) {    $variables['content_column_class'] = ' class="col­sm­8"';    }  else {    $variables['content_column_class'] = ' class="col­sm­12"';  }}

-Editar el archivo page.tpl.php ubicado en sites/all/themes/mitema/templates cambiamos a col-sm-4 en los sidebar first y second.

Gracias por su atención!!!

ruth.rocha@supersoftinc.com

@ruthrochab

http://supersoftinc.com/

Supersoft