Я недавно начал использовать Twitter Bootstrap в своих проектах, но полюбил я его сразу. Вот несколько причин по которым его стоит использовать:
Создан профессиональным инженером идизайнером из Twitter’а, Bootstrap используетLESS CSS, скомпилированный через Node, и управляемы через GitHub дабы помочь ботанам создавать уникальный контент в Сети.
Bootstrap создан не только для красивого отображения в самых современных браузерах, Bootstrap теперь работает даже в IE7!, а так же на Планшетах и Смартфонах благодарядинамическому CSS.
2 колонный динамический дизайн и сетка, сотни компонентов, javascript-плагины, шрифты, формы, а так же web-Кастомизатор, который позволит скачать только необходимые Вам компоненты в нужном виде.
Первое что я делал используя Twitter Bootstrap — это автоматическая генерация многоколоночного контента для кастомного типа постов. Идея простая — есть определенный layout, который хранится в JSON-файле (макет лэйоута страницы. В нем хранятся строки, колонки в каждой строке и контент каждой колонки), этот файл передается в функцию рендеринга, которая возвращает html-макет страницы.
Вот пример JSON-макета страницы:
{
"title":"New Layout",
"alias":"layout-1365763296",
"body_structure":{
"row_0":{
"column_0":{
"content_elements":{
"element-0":{
"content_type":"default_content",
"content_source":""}
},
"grid_position":"4"
},
"column_1":{
"content_elements":{
"element-0":{
"content_type":"default_content",
"content_source":""
}
},
"visible_on":["desktop","tablet","phone"],
"grid_position":"8"
},
"column_2":{
"content_elements":{
"element-0":{
"content_type":"default_content",
"content_source":""
}
},
"visible_on":["desktop","tablet","phone"],
"grid_position":"12"
}
},
"row_1":{
"column_0":{
"content_elements":{
"element-0":{
"content_type":"default_content",
"content_source":""
}
},
"visible_on":["desktop","tablet","phone"],
"grid_position":"6"
},
"column_1":{
"content_elements":{
"element-0":{
"content_type":"default_content",
"content_source":""
}
},
"visible_on":["desktop","tablet","phone"],
"grid_position":"12"
}
}
}
}
Мы получаем содержимое файла и передаем его в функцию render_layout (предварительно распарисв файл с помощью функции json_decode):
$layout = json_decode(file_get_contents('layout.json'));
render_layout($layout);
Вот содержимое render_layout:
<?php
function render_layout($layout){
// это объект, который занимается формированием лэйоутов
// и получением необходимого контента его код я показать не могу
global $layouts_manager;
foreach ($layout['body_structure'] as $row_key => $columns) :
$global_width = ((count($columns) % 2) == 0) ? 8 : 9;
?>
<div class="row">
<div class="span<?php echo $global_width; ?>">
<div class="row">
<?php foreach ($columns as $column_key => $column_val) :
$width = round($global_width / count($columns));
?>
<div class="span<?php echo $width; ?>"><br>
<?php foreach ($column_val['content_elements'] as $element_key => $element) : ?>
<div class="row">
<div class="span<?php echo $width; ?>">
<?php
$contet = $layouts_manager->get_element_content(
$element['content_type'],
$element['content_source']
);
?>
<?php echo $contet; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div><br>
</div>
</div>
<?php endforeach; ?>
<?php
}
?>
В этой функции мы и применяем сетку Twitter Bootstrap. Для использования Twitter Bootstrap в WordPress, его нужно сначала подключить:
// подключение bootstrap для фронтенда (в админке WordPress он не нужен)
if(!is_admin()){
wp_enqueue_script( 'bootstrap_js', 'bootstrap/js/bootstrap.js' );
wp_enqueue_style( 'bootstrap_css', 'bootstrap/css/bootstrap.css' );
}