Необходимо ли знать less и sass, чтобы освоить Bootstrap?
Автор: Александр Мальцев
Здравствуйте. Необходимо ли знать less и sass, чтобы использовать Bootstrap?
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии (6)
Вы должны авторизоваться, чтобы оставлять комментарии.
Вот ссылка на мой сайт: _http://rybalcyn.bget.ru/index.php/ru/news
Вот мой index.php:
<?php /** * @package Joomla.Site * @subpackage Templates.protostar * * @copyright Copyright © 2005 - 2015 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */ defined('_JEXEC') or die; $app = JFactory::getApplication(); $doc = JFactory::getDocument(); $user = JFactory::getUser(); $this->language = $doc->language; $this->direction = $doc->direction; // Getting params from template $params = $app->getTemplate(true)->params; // Detecting Active Variables $option = $app->input->getCmd('option', ''); $view = $app->input->getCmd('view', ''); $layout = $app->input->getCmd('layout', ''); $task = $app->input->getCmd('task', ''); $itemid = $app->input->getCmd('Itemid', ''); $sitename = $app->get('sitename'); if($task == "edit" || $layout == "form" ) { $fullWidth = 1; } else { $fullWidth = 0; } // Add JavaScript Frameworks $doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/bootstrap.js'); // Add Stylesheets $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/bootstrap.css'); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/style.css'); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css'); // Load optional RTL Bootstrap CSS JHtml::_('bootstrap.loadCss', false, $this->direction); // Adjusting content width if ($this->countModules('position-7') && $this->countModules('position-8')) { $span = "col-md-6"; } elseif ($this->countModules('position-7') && !$this->countModules('position-8')) { $span = "col-md-9"; } elseif (!$this->countModules('position-7') && $this->countModules('position-8')) { $span = "col-md-9"; } else { $span = "col-md-12"; } // Logo file or site title param if ($this->params->get('logoFile')) { $logo = '<img src="' . JUri::root(). $this->params->get('logoFile'). '" alt="' . $sitename . '" />'; } elseif ($this->params->get('sitetitle')) { $logo = '<span class="site-title" title="' . $sitename . '">' . htmlspecialchars($this->params->get('sitetitle')). '</span>'; } else { $logo = '<span class="site-title" title="' . $sitename . '">' . $sitename . '</span>'; } ?> <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <jdoc:include type="head" /> </head> <body> <div class="container" id="main"> <div class="row"> <div class="col-xs-12 col-md-6 col-md-push-3 hidden-xs" style="background:#2780e3; text-align:center;"> <font color="#FFFFFF"; size="5"><b>Полтавский Банк Информации</b></font> </div> <div class="col-xs-12 col-md-3 col-md-pull-6"> <p class="fig"><img src="images/uapoltava.png" style="align:center"; alt="Полтавский банк информации" /> </div> <div class="col-xs-12 col-md-3" id="social"> <a href="http://vk.com/rybalchenkoiv" target="_blank" class="icon-vk"></a> <a href="" class="icon-facebook2"></a> <a href="" class="icon-twitter"></a> <a href="" class="icon-google-plus2"></a> </div> <div class="row"> <div class="col-xs-12"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topmenu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="topmenu"> <jdoc:include type="modules" name="position-1" style="none" /> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <div class="row"> <div class="col-xs-12"> <jdoc:include type="modules" name="position-5" style="none" /> </div> <div class="row"> <div class="col-md-3> <jdoc:include type="modules" name="position-8" style="xhtml" /> </div> <div class="col-md-6> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> <div class="col-md-3> <jdoc:include type="modules" name="position-7" style="xhtml" /> </div> </div> </div> <div class="row"></div> <div class="row"></div> </div> </body> </html>2. Элемент с классом .row нельзя напрямую размещать в элементе с классом .row
Лучше всего разметку делать так:
<!-- Шапка сайта --> <div id="header"> <div class="container"> <div class="row"> ... </div> </div> </div> <!-- Меню --> <div id="nav"> <div class="container"> <div class="row"> ... </div> </div> </div> ...Less и Sass — это просто более удобный способ написания файла CSS. Из всего многообразия less-файлов наибольший интерес предоставляет файл variables.less. Он содержит CSS настройки Bootstrap компонентов. Но настраивать компоненты можно также с помощью CSS, переопределяя соответствующие стили.