Необходимо ли знать less и sass, чтобы освоить Bootstrap?

Здравствуйте. Необходимо ли знать less и sass, чтобы использовать Bootstrap?


   Вопросы 0    296 0

Комментарии (6)

  1. Александр Мальцев # 0
    Нет, необязательно. Тут даже можно обойтись без знаний CSS. Основное, что необходимо понять — это систему сеток Bootstrap. Освоив систему сеток, Вы сможете сверстать адаптивную структуру почти любого сайта. После создания структуры сайта (веб-страницы), обычно переходят к наполнению её компонентами Bootstrap. Здесь основная задача сводится к поиску необходимого компонента и вставки его HTML-кода в нужное место. Если необходимо настроить компонент, то это в Bootstrap осуществляется с помощью классов.
    Less и Sass — это просто более удобный способ написания файла CSS. Из всего многообразия less-файлов наибольший интерес предоставляет файл variables.less. Он содержит CSS настройки Bootstrap компонентов. Но настраивать компоненты можно также с помощью CSS, переопределяя соответствующие стили.
    1. Askar # 0
      А за неделю можно научится?
      1. Александр Мальцев # 0
        Вполне.
      2. Игорь # 0
        Здравствуйте, Александр. На Вас последняя надежда (уже неделю не могу решить). Делаю верстку шаблона для Joomla на Bootstrap. Проблема в том, что боковые колонки с модулями не хотят размещаться по бокам, а спрыгивают вниз под материал. Модуль входа на сайт размещаю в позицию слева (position-7), но он все равно спрыгивает вниз под материал (колонок как бы вообще нету). И к тому же текст в материале не хочет сжиматься при маленьком разрешении экрана. Помогите пожалуйста. Уже всю голову сломал. Может Вы уже когда-то встречались с таким? Гляньте если не трудно. Я думаю Вы сразу поймете в чем проблема.

        Вот ссылка на мой сайт: _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>
        1. Александр Мальцев # 0
          1. Ошибка в атрибутах (нет закрывающий кавычки у значения класса):
          <div class="col-md-3>
          
          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>
          ...
          
          1. Игорь # 0
            Огромное Вам спасибо, за то что откликнулись! Теперь все работает нормально! Если бы не Вы, я бы наверное еще неделю сидел над этой проблемой. Огромное Вам ЧЕЛОВЕЧЕСКОЕ СПАСИБО!!!

        Вы должны авторизоваться, чтобы оставлять комментарии.