ããŒã1ãã¯ããã«èšäºã®ååã§ãã°ãªããïŒã°ãªããïŒã«åºã¥ããŠç¬èªã®ã«ã¹ã¿ã ããŒããäœæãããã³ãã¬ãŒãã®HTMLã³ãŒãã倿Žããã«é åã®å Žæãšãµã€ãºãä»»æã«æ§æããã³å€æŽã§ãããDrupalã®åªããOmegaãã¬ãŒã ã¯ãŒã¯ã«ã€ããŠèª¬æããŸããã ããã§ãããããšã¯ã§ããŸãããã°ãªããã®ç¬èªã®å®è£
ãåããçŽ æŽããã匷åãªBootstrap CSSãã¬ãŒã ã¯ãŒã¯ãã¹ã¿ã€ã«èšå®ãéåžžã«ç°¡åãªæ¢è£œã®CSSã³ã³ããŒãã³ããšJSã³ã³ããŒãã³ãããããŠå·šå€§ãªã³ãã¥ããã£ããããŸããç«¶åä»ç€Ÿãšæ¯èŒããã³ãŒãã
èšäºã®ãã®éšåã§ã¯ãBootstrapãOmegaã«ãã€ã³ãããæ¹æ³ã説æããŸãã ããããäœããã®çç±ã§Bootstrapãããªãã«åããªãå Žåã¯ããã®æ¹æ³ã§ãéžæããä»ã®ãã¬ãŒã ã¯ãŒã¯ãOmegaã«çµã³ä»ããããšãã§ããŸãã èšäºã®æåã®éšåã®ããã«ãç§ã¯ç¬èªæ§ã®ãµããããã®ã§ã¯ãªããããã¥ã¡ã³ãããåŠã¹ãããšã説æããã ãã§ãã å€ãã®ã³ãŒããšããã€ãã®åçããããŸãã
ãŸããããäžåºŠãç§ãã¡ãäœãæ±ãã¹ããã«ã€ããŠã®ã¢ã€ãã¢ãåŸãããã®å°ããªçè«ã ãããã£ãŠãOmegaãã¬ãŒã ã¯ãŒã¯ã®æ§é ïŒ
- åºæ¬çãªã¢ã«ãã¡ããŒãã«ã¯ãããŒãèšå®ã䜿çšããŠãŸãŒã³ãšå°åã®å Žæãèšå®ã§ããæ©èœã ãã§ãªããããŸããŸãªçš®é¡ã®åºæ¬ã°ãªããïŒåºå®ããã³æµåïŒãšåæ°ïŒ12ã16ã24ïŒãèªç±ã«å°å
¥ã§ããæ©èœãå«ãŸããŠããŸãã
- ã³ã¢Drupal HTML5ãã³ãã¬ãŒããåå®çŸ©ããããã¢ã«ãã¡ã³ã¢ããŒãã®ãµãããŒãã§ãããªã¡ã¬ã³ã¢ããŒã ã
- ã¹ã¿ãŒã¿ãŒããããããã«åºã¥ããŠãOmegaããŒã«ã¢ãžã¥ãŒã«ã䜿çšããŠãæåãŸãã¯èªåã§Omegaã«åºã¥ããµãããŒããäœæããããæåŸ
ãããŠããŸãã
ãããã£ãŠãOmegaã§Bootstrapã䜿çšããã«ã¯ã以äžãå®è¡ããå¿
èŠããããŸãã
- OmegaãµãããŒãã§ããåºæ¬ããŒããäœæããŠãBootstrapãæ¥ç¶ããBootstrapïŒspan *ïŒã§OmegaïŒgrid- *ïŒCSS CSSã¯ã©ã¹ãåå®çŸ©ããæšæºã®Drupalã³ã³ããŒãã³ãïŒãã¿ã³ãã·ã¹ãã ã¡ãã»ãŒãžãªã©ïŒã«å¿
èŠãªCSSã¯ã©ã¹ã远å ããŸãã ããã³ãããªã¹ãããããŒãžããŒã·ã§ã³ãªã©ïŒã
- åºæ¬ããŒãã®ã¹ã¿ãŒã¿ãŒããããäœæããŠãOmegaããŒã«ã䜿çšããŠãµãããŒãããã°ããäœæããŸãã
Omega HTML5 Startkitããåºæ¬ããŒããäœæããŸãã
åºæ¬ããŒããšã¹ã¿ãŒã¿ãŒãããã®æºå
omega/starterkits/omega-html5
ãã£ã¬ã¯ããªã®æšªã«ããomega/starterkits/omega-html5
ãã£ã¬ã¯ããªãã³ããŒããååãomega_bootstrap
倿Žãomega_bootstrap
ã- ãã¡ã€ã«ã®ååã
starterkit_omega_html5.info
â omega_bootstrap.info
ã css/global.css
â css/omega-bootstrap.css
ã YOURTHEME-alpha-default-narrow.css, YOURTHEME-alpha-default-normal.css, YOURTHEME-alpha-default-wide.css, YOURTHEME-alpha-default.css
- BootsrtapãããŠã³ããŒããã
bootstrap.css
ããã³bootstrap-responsive.css
ãã¡ã€ã«ãcss
ãã£ã¬ã¯ããªã«é
眮ãã bootstrap.js
ãã¡ã€ã«ã®js
ãã£ã¬ã¯ããªãäœæããŸãã çž®å°çã䜿çšããå¿
èŠã¯ãããŸãããå°æ¥ãæšæºã®DrupalããŒã«ã䜿çšããŠCSSãšJSãå§çž®ã§ããŸãã
次ã«ã
omega_bootstrap.info
ããŒãèšå®ãã¡ã€ã«ã®ç·šéãéå§ããŸãã ãŸãã
name = Omega with Bootstrap
ããã³
starterkit = FALSE
ãã©ã¡ãŒã¿ãŒã䜿çš
name = Omega with Bootstrap
ã
name = Omega with Bootstrap
ã«å€æŽããŸãã
䟿å®äžããã®ãã¡ã€ã«ã®ãã©ã¡ãŒã¿ãŒã¯ã»ã¯ã·ã§ã³ã«åå²ãããŠããŸãã
ã
ADDITIONAL REGIONS
ãš
ZONES
ãã»ã¯ã·ã§ã³ã§ãå¿
èŠãªãŸãŒã³ãŸãã¯é åã远å ã§ããŸãã
OPTIONAL STYLESHEETS
ã»ã¯ã·ã§ã³ã§ããã¹ãŠ
[global.css]
ã
[omega-bootstrap.css]
ã«å€æŽãã
name
ãã©ã¡ãŒã¿ãŒã
Omega Bootstrap custom styles
ã ããã§ãCSSã远å ããŠïŒããšãã°FontAwesomeãæå¹ã«ããïŒã[
ã¹ã¿ã€ã«ã®
åãæ¿ã]ã»ã¯ã·ã§ã³ã®ããŒãèšå®ã§ãªã³/ãªããåãæ¿ããããšãã§ããŸã
ïŒã¹ã¿ã€ã«ã®æå¹å/ç¡å¹åïŒãOPTIONAL STYLESHEETS
äžã«ã
OPTIONAL STYLESHEETS
ãš
CSS GRID SYSTEMS
ã»ã¯ã·ã§ã³ãäœæããŸãã
; OPTIONAL LIBRARIES libraries[bootstrap][name] = 'Bootstrap' libraries[bootstrap][description] = 'Sleek, intuitive, and powerful front-end framework for faster and easier web development.' libraries[bootstrap][css][0][file] = bootstrap.css libraries[bootstrap][css][0][options][weight] = 1 libraries[bootstrap][css][1][file] = bootstrap-responsive.css libraries[bootstrap][css][1][options][weight] = 2 libraries[bootstrap][js][0][file] = bootstrap.js libraries[bootstrap][js][0][options][weight] = -1 ; CSS GRID SYSTEMS grids[bootstrap][name] = Bootstrap grids[bootstrap][layouts][normal] = Normal grids[bootstrap][columns][12] = 12 Columns
ãããã®ã»ã¯ã·ã§ã³ãèšè¿°ããããã®ãã©ãŒãããã
alpha.info
ããã³
omega.info
ãã
alpha.info
ã
omega.info
ã
ãŸããOmega HTML5 Startkitããã¹ã¿ãŒã¿ãŒããããäœæããŸãã
omega/starterkits/omega-html5
ãããã£ã¬ã¯ããªomega/starterkits/omega-html5
ãomega_bootstrap
ãååãomega-html5-bootstrap
ãŸããstarterkit_omega_html5.info
ååãstarterkit_omega_html5.info
ã«starterkit_omega_html5_bootstrap.info
ã YOURTHEME-alpha-default-narrow.css, YOURTHEME-alpha-default-normal.css, YOURTHEME-alpha-default-wide.css, YOURTHEME-alpha-default.css
starterkit_omega_html5_bootstrap.info
ãã¡ã€ã«ã§starterkit_omega_html5_bootstrap.info
name = Omega HTML5 Starterkit with Bootstrap
ããã³base theme = omega_bootstrap
ã name = Omega HTML5 Starterkit with Bootstrap
starterkit_omega_html5_bootstrap.info
倿Žãbase theme = omega_bootstrap
ã
åºæ¬ããŒããšã¹ã¿ãŒã¿ãŒãããã¯ããã«äœ¿çšã§ããŸãã ããããããã¯çµããã§ã¯ãªããå§ãŸãã«ãããŸããã
ãµããµããžã§ã¯ãã®äœæ
次ã«èµ·ããããã»ã¹ãããèŠèŠçã«è¡šçŸããããã«ãOmegaããŒã«ã䜿çšã
ãŠèšäºã®æåã®éšåã§èª¬æããæ¹æ³ã§æ°ããããŒããäœæããŸãã
ããŒã¹ããŒãïŒããŒã¹ããŒãïŒã§ã®ã¿
Omega with Bootstrap ãéžæ
ã ã
ã¹ã¿ãŒã¿ãŒãããïŒã¹ã¿ãŒã¿ãŒã»ããïŒã§ OmegaããŒãã¹ãã©ãããåããHTML5ã¹ã¿ãŒã¿ãŒããã ïŒå³1ïŒã
1ã

2ã

3ã

4ã

5ã

ããã©ã«ãã§ããŒããèšå®ããèšå®ã«ç§»åããŸãã
- ã°ãªããã·ã¹ãã ã®ã°ãªããèšå®ã¿ãïŒã°ãªããã¿ã€ãïŒã« ãæ°ããããŒãã¹ãã©ããã¿ã€ãã衚瀺ãããŸãïŒå³2ïŒã
- [ ãŸãŒã³ãšãªãŒãžã§ã³ã®æ§æ ]ã¿ãã§ãããŒãã¹ãã©ããã¯ã©ã¹ããŸãŒã³ãšãªãŒãžã§ã³ã«è¿œå ããŸãã [ãŸãŒã³ã®æ§æ]ã»ã¯ã·ã§ã³ã®[ 远å ã®ãŸãŒã³ã¯ã©ã¹]ãã£ãŒã«ãã§ã
row
ã®å€ãèšå®ãã[ 远å ã®ã©ãããŒã¯ã©ã¹]ãã£ãŒã«ãã§ã container
ã®å€ãèšå®ããŸãã ãªãŒãžã§ã³èšå®ã®ã 远å ã®ãªãŒãžã§ã³ã¯ã©ã¹ããã£ãŒã«ãã§ãå¿
èŠãªåæ°ã«å¿ããŠç®çã®span*
ã¯ã©ã¹ãèšå®ããŸãã Omegaã§ã¯ãçŸåšäœ¿çšããŠãããŸãŒã³ãšãªãŒãžã§ã³ã«ä»»æã®ã¯ã©ã¹ãæå®ã§ããŸãããå°æ¥ãã®ããã»ã¹ãèªååããŸãïŒå³3ïŒã - [ ã©ã€ãã©ãªã®åãæ¿ã ]ã¿ãïŒã©ã€ãã©ãªã®æå¹å/ç¡å¹åïŒã§ããã¹ãŠã®æšæºOmegaã©ã€ãã©ãªããªãã«ãã ããŒãã¹ãã©ãããæå¹ã«ããŸãïŒå³4ïŒã
- [ ã¹ã¿ã€ã«ã®åãæ¿ã ]ã¿ãïŒã¹ã¿ã€ã«ã®æå¹å/ç¡å¹åïŒã§ã [ ãªãã·ã§ã³ã®ã¹ã¿ã€ã«ã·ãŒãã®æå¹ å ]ã»ã¯ã·ã§ã³ã®ãã¹ãŠã®ã¹ã¿ã€ã«ãç¡å¹ã«ããŸãããã ãã Omega Bootstrapã«ã¹ã¿ã ã¹ã¿ã€ã«ïŒãã¹ãŠïŒ-omega-bootstrap.cssããã³ã«ã¹ã¿ã ã°ããŒãã«ã¹ã¿ã€ã«ïŒãã¹ãŠïŒ-ã°ããŒãã«ãé€ããŸãã css ïŒå³5ïŒã
èšäºã®æåã®éšåã®æšå¥šäºé
ã«åŸã£ãŠä»ã®ãã¹ãŠã®èšå®ãèšå®ããä¿åããŸãã æ¬¡ã«ã
ããŒãèšå®ã®
ãšã¯ã¹ããŒããã¿ã³ãã¯ãªãã¯ãã
èšå®ãã³ããŒããŠ
omega-html5-bootstrap/starterkit_omega_html5_bootstrap.info
ã«è²Œãä»ãã
THEME SETTINGS (DEFAULTS)
ã»ã¯ã·ã§ã³ã®èšå®ã«çœ®ãæããŸãã ãã®å Žåãã¹ã¿ãŒã¿ãŒãããã®æ°ããããŒãã¯ãã¹ãŠãå¿
èŠãªæ¹æ³ã§ããã«æ§æãããŸãã
ããŒã
ããŒãã¹ãã©ããã¯ã¯ã©ã¹ã䜿çšããŠãæšæºã®Drupalã¯ã©ã¹ãšã¯ç°ãªãèŠçŽ ãã¹ã¿ã€ã«ããŸãã ãããã£ãŠãæšæºã®DrupalèŠçŽ ã®åºåã«Bootsrtapã¯ã©ã¹ã远å ããå¿
èŠããããŸãã ãããè¡ãããã«ãDrupalããŒãã®æšæºæ©èœã䜿çšããŸããã€ãŸããå¿
èŠãª
theme_
颿°ãåå®çŸ©ããŸãã DrupalããŒãã®å¯èœæ§ã«ã€ããŠã®è©³çްã¯ãããã¥ã¡ã³ãã»ã¯ã·ã§ã³
ã®ããŒãã¬ã€ã€ãŒã®äœ¿çš ïŒ
http://drupal.org/node/933976 ïŒããåŠã¶ããšãã§ããŸãã
ããŒã¹ããŒã
omega_bootstrap
ã«ãŒãã«ãã
template.php
ãã¡ã€ã«ã§ããŒã颿°ãåå®çŸ©ããŸãããã®å ŽåãããŒãã¯ãã¹ãŠã®ãµãããŒãã«ç¶æ¿ãããŸãã
éå§ããã«ã¯ã
container
ã¯ã©ã¹ãš
row
ã¯ã©ã¹ãæåã§ãŸãŒã³ã«è¿œå ããå¿
èŠããªããã¯ã©ã¹ã«
span*
ã¯ã©ã¹ã远å ããå¿
èŠããããŸããã ãããè¡ãã«ã¯ã
omega_bootstrap_process()
颿°ã
template.php
ã«è¿œå ã
omega_bootstrap_process()
ã
omega_bootstrap_processïŒïŒ function omega_bootstrap_process(&$vars, $hook) { if (!empty($vars['elements']['#grid']) || !empty($vars['elements']['#data']['wrapper_css'])) { if (!empty($vars['elements']['#grid'])) { foreach (array('prefix', 'suffix', 'push', 'pull') as $quality) { if (!empty($vars['elements']['#grid'][$quality])) { array_unshift($vars['attributes_array']['class'], 'offset' . $vars['elements']['#grid'][$quality]);
omega/alpha/template.php
ãã¡ã€ã«ã«ãã
alpha_process()
颿°ããã³ãŒããåçšããŸããã ã芧ã®ãšããã
row
ã远å ããå¿
èŠããããŸãããã®ããããã³ãã¬ãŒããã¡ã€ã«ã
omega/alpha/templates/zone.tpl.php
ããã³
omega/omega/templates/zone--content.tpl.php
omega_bootstrap/templates
ãã
omega_bootstrap/templates
ãã£ã¬ã¯ããªã«
omega_bootstrap/templates
ããæ¬¡ã®ããã«ç·šéããŸãã
Zone.tpl.phpãã¡ã€ã« <?php ?> <?php if ($wrapper): ?><div<?php print $attributes; ?>><?php endif; ?> <div<?php print $content_attributes; ?>><div class="row"> <?php print $content; ?> </div></div> <?php if ($wrapper): ?></div><?php endif; ?>
ãŸãŒã³ãã¡ã€ã«-content.tpl.php <?php if ($wrapper): ?><div<?php print $attributes; ?>><?php endif; ?> <div<?php print $content_attributes; ?>><div class="row"> <?php if ($breadcrumb): ?> <div id="breadcrumb" class="grid-<?php print $columns; ?>"><?php print $breadcrumb; ?></div> <?php endif; ?> <?php if ($messages): ?> <div id="messages" class="grid-<?php print $columns; ?>"><?php print $messages; ?></div> <?php endif; ?> <?php print $content; ?> </div></div> <?php if ($wrapper): ?></div><?php endif; ?>
ããŒãèšå®ããäžèŠãªã¯ã©ã¹ãåé€ããéåžžã®æ¹æ³ã§ãªãŒãžã§ã³ã®åæ°ãèšå®ã§ããããã«ãªããŸããã
次ã«ãè£
食ã«é²ã¿ãŸãã 察å¿ãã颿°ããã³ãŒããååŸããããŒãºã«åãããŠãããã«å€æŽããBootstrapã¯ã©ã¹ã远å ããŸãã
ããã³ãããªã¹ããDelta Blocksã¢ãžã¥ãŒã«ã䜿çšããŠã·ã¹ãã èŠçŽ ã衚瀺ããããããã®ããŒã颿°ãåå®çŸ©ããŸãã
function omega_bootstrap_delta_blocks_breadcrumb($variables) { $output = ''; if (!empty($variables['breadcrumb'])) { if ($variables['breadcrumb_current']) { $variables['breadcrumb'][] = l(drupal_get_title(), current_path(), array('html' => TRUE)); } $output = '<div id="breadcrumb" class="clearfix"><ul class="breadcrumb">'; $switch = array('odd' => 'even', 'even' => 'odd'); $zebra = 'even'; $last = count($variables['breadcrumb']) - 1; foreach ($variables['breadcrumb'] as $key => $item) { $zebra = $switch[$zebra]; $attributes['class'] = array('depth-' . ($key + 1), $zebra); if ($key == 0) { $attributes['class'][] = 'first'; } if ($key == $last) { $attributes['class'][] = 'last'; } else { $item .= '<span class="divider">/</span>'; } $output .= '<li' . drupal_attributes($attributes) . '>' . $item . '</li>'; } $output .= '</ul></div>'; } return $output; }
ã·ã¹ãã ã¡ãã»ãŒãžmessages
ã¯ã©ã¹ã¯
alert
倿ŽãããŸãã
function omega_bootstrap_status_messages($variables) { $display = $variables['display']; $output = ''; $status_heading = array( 'status' => t('Status message'), 'error' => t('Error message'), 'warning' => t('Warning message'), ); $class = array( 'status' => 'alert alert-success', 'error' => 'alert alert-error', 'warning' => 'alert', ); foreach (drupal_get_messages($display) as $type => $messages) { $output .= "<div class=\"{$class[$type]}\">\n"; if (!empty($status_heading[$type])) { $output .= '<h2 class="element-invisible">' . $status_heading[$type] . "</h2>\n"; } if (count($messages) > 1) { $output .= " <ul>\n"; foreach ($messages as $message) { $output .= ' <li>' . $message . "</li>\n"; } $output .= " </ul>\n"; } else { $output .= $messages[0]; } $output .= "</div>\n"; } return $output; }
ãã¿ã³ãã¿ã³ç§ã¯
nav-pills
ã奜ã¿
nav-tabs
眮ãæããããšãã§ã
nav-tabs
ã
function omega_bootstrap_menu_local_tasks(&$variables) { $output = ''; if (!empty($variables['primary'])) { $variables['primary']['#prefix'] = '<h2 class="element-invisible">' . t('Primary tabs') . '</h2>'; $variables['primary']['#prefix'] .= '<ul class="nav nav-pills">'; $variables['primary']['#suffix'] = '</ul>'; $output .= drupal_render($variables['primary']); } if (!empty($variables['secondary'])) { $variables['secondary']['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2>'; $variables['secondary']['#prefix'] .= '<ul class="nav nav-pills">'; $variables['secondary']['#suffix'] = '</ul>'; $output .= drupal_render($variables['secondary']); } return $output; }
ãã©ãŒã ãã¿ã³btn
ã¯ã©ã¹ã远å ã
btn
ã
function omega_bootstrap_button($variables) { $element = $variables['element']; $element['#attributes']['type'] = 'submit'; element_set_attributes($element, array('id', 'name', 'value')); $element['#attributes']['class'][] = 'btn'; switch($element['#id']) {
ããŒãžããŒã·ã§ã³ã¯ã©ã¹ã®
pagination
ã
function omega_bootstrap_pager($variables) { $tags = $variables['tags']; $element = $variables['element']; $parameters = $variables['parameters']; $quantity = $variables['quantity']; global $pager_page_array, $pager_total;
åæ§ã®ååã«åŸã£ãŠã Bootstrapã¯ã©ã¹ãæšæºã®Drupalåºåã«è¿œå ããå¿
èŠãããå Žå-ããŒã颿°ïŒãŸãã¯ãã³ãã¬ãŒãïŒãåå®çŸ©ããã ãã§ãããã¯ãã¹ãŠæšæºã®DrupalããŒã«ã䜿çšããŠè¡ãããŸãã
Bootstrap DrupalããŒãããããã€ãã®è¿œå æ©èœãåããããšãã§ããŸãã ããŒãèšå®ã§å€æŽã§ãã远å ã®ãã©ã¡ãŒã¿ãŒã§ãããã®æ©èœãè£å®ããããšãã§ããŸãã èšå®ã®äŸïŒãã³ãããªã¹ãã
nav-tabs
ãŸãã¯
nav-pills
åºåãæåãããŒãž
pagination-large
ãµã€ãºãšå ŽæïŒ
pagination-large
/
pagination-small
/
pagination-mini
ããã³
pagination-centered
/
pagination-right
ïŒã 詳现ã«ã€ããŠã¯ã
ããŒãã®è©³çްèšå®ã®äœæã«é¢ããããã¥ã¡ã³ãïŒ
http://drupal.org/node/177868 ïŒãåç
§ããŠãã ããã
䜿çšãã
ããã§ã¯ãå®éã®éšåã«ç§»ããããããã¹ãŠäœ¿çšããæ¹æ³ãèŠãŠã¿ãŸãããã æå§ãã«ãBootstrapã«ã©ã ã®å¹
ã«åãããŠè£å©ãªãŒããŒã¬ã€ã°ãªãããèšå®ããããšããå§ãããŸãã ãããè¡ãã«ã¯ãåºæ¬çãªAlphaããŒãããPNGãèŠã€ããŠã°ã©ãã£ã«ã«ãšãã£ã¿ãŒã§å€æŽãã
omega-bootstrap.css
ã®
alpha-grid-debug
ã¯ã©ã¹ããªãŒããŒã©ã€ãããŸãã
Bootstrap JSã³ã³ããŒãã³ããåäœããããã®jQueryã®æå°ããŒãžã§ã³-1.7ã®å Žåã
jQuery Updateã¢ãžã¥ãŒã«ã䜿çšããŠæ¥ç¶ããå¿
èŠãããããšã«æ³šæããŠãã ããã
ãããã¯ã¯ã©ã¹ã¢ãžã¥ãŒã«ïŒãã®èšäºã®æåã®éšåã§èª¬æããŸããïŒã䜿çšãããšãããšãã°æšæº
well
ãªã©ã®ãããã¯ã«å¿
èŠãªã¯ã©ã¹ã远å ãããšéåžžã«äŸ¿å©ã§ãïŒå³6ãåç
§ïŒã
Viewsã¢ãžã¥ãŒã«ã®è¡šç€ºèšå®ã«ã¯ãã»ãŒãã¹ãŠã®ã³ã³ããŒãã³ãã«ä»»æã®ã¯ã©ã¹ãèšå®ããæšæºæ©èœããããBootstrapã䜿çšããéåžžã«å¹
åºãå¯èœæ§ãéããŸãã
äŸ1ïŒã¡ãã·ã¥åºåã ãããè¡ãã«ã¯ã
row
ã¯ã©ã¹ã
Other-CSSã¯ã©ã¹ãã¥ãŒå
šäœã«è¿œå ãã
row
ã¯ã©ã¹èšå®ã§ã
Format-Unformatted list-Settings-Row class output formã䜿çšããŠãã¯ã©ã¹ãå¿
èŠãªåæ°ïŒ
span2
ãŸãã
äŸ2ïŒ
Mediaãªããžã§ã¯ãã® Bootstrapã³ã³ããŒãã³ãã䜿çšããŠãã¥ãŒã¹ã衚瀺ã
ãŸã ã ãããè¡ãã«ã¯ã
ãã©ãŒããã-ãã©ãŒããããããŠããªããªã¹ã-èšå®- media
ã¯ã©ã¹ã®
è¡ã¯ã©ã¹ ãç»åãã£ãŒã«ãã®èšå®ã¹ã¿ã€ã«ã¹ã¿ã€ã«-ãã£ãŒã«ããšã©ãã«ã©ãããŒHTMLã®ã«ã¹ã¿ãã€ãº-CSSã¯ã©ã¹ãäœæããŠ
pull-left
ã¯ã©ã¹ã远å ããåããã©ã¡ãŒã¿ãŒã®ããã¹ããæã€ãã£ãŒã«ãã远å ããŸãã¯ã©ã¹
media-body
ã
Rewrite resultsã䜿çšããŠä»ã®ãã£ãŒã«ããåããã£ãŒã«ãã«è¿œå ã§ããŸã
-åºåã®ããã«ãããã®ãã£ãŒã«ãèªäœããªãã«ããããšãå¿ããã«
ããã®ãã£ãŒã«ãã®åºåãæžãæããŸã
ïŒè¡šç€ºããé€å€ïŒ ã
ãŸãã
Views Bootstrapã¢ãžã¥ãŒã«ã䜿çšããŠïŒ
mrdedã®ãããã§ïŒã
Thumbnailsã
Carouselãªã©ã®Bootstrapã³ã³ããŒãã³ãã䜿çšããŠãã¥ãŒãã¹ã¿ã€ã«ã§ããŸãã
ãããŠæåŸã«ãçµæã®ãããã¯ãã©ã³ã¯ã®æ©èœã®ããã€ãã®å°ããªãã¢ã
å³6.ãããã°ãããã¯ãæå¹ã«ããã¬ãã£ããŒã
ãæž
èŽããããšãããããŸããïŒ ãã®èšäºãã圹ã«ç«ã¡ãDrupalã®äœ¿çšç¯å²ãåºããããšãé¡ã£ãŠããŸãã