Форум русской поддержки Joomla!® CMS
08.12.2016, 11:54:33 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Класс.span* в шаблонах на Bootstrap 2

 (Прочитано 1007 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Deneb
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 22


« : 25.03.2015, 20:19:11 »

Народ, помогите разобраться с классом .span* в В2. Не совсем понимаю как с помощью него менять размеры блоков под конкретную ширину экрана. Если в B3 есть возможность для одного блока задать несколько соответствующих стилей (например: col-lg-8 col-md-6 col-sm-3) что позволяет для разных ширин экрана задавать разную ширину блока, то как это работает в В2 со .span*? Поясню, в контексте чего я задаю вопрос. У меня есть два шаблона на В2, с практически одинаковой кодировкой HTML скелетных файлов:
шаблон 1 код

шаблон 2 код


Но первый шаблон при максимальном сужении под размер телефона, оставляет блоки компонента с картинками в две колонки (по аналогии В3 col-xs-6 col-xs-6):
шаблон 1

а второй располагает картинки компонента в ряд (по аналогии В3 col-xs-12):
шаблон 2


Мне нужно в первом шаблоне при мобильном размере, чтобы блоки картинок вставали в ряд, как во втором шаблоне. Полазил в CSS, посравнивал, но кода много и пока не знаю за что зацепится, поскольку не пойму как .span* в В2 работает с разными размерами. Русскую локализацию В2 почитал, но ответа не нашел. Кто в курсе, подскажите будьте добры.
Записан
ShfVD
Живу я здесь
******

Репутация: +65/-0
Offline Offline

Пол: Мужской
Сообщений: 922



« Ответ #1 : 25.03.2015, 20:31:23 »

В первом шаблоне класс ров-флуид (резиновый) во втором ров
http://bit.ly/1Gm2M8H
http://bit.ly/1Gm37YM
или наоборот, - почитай сетку бутстроап2
http://bootstrap-ru.com/scaffolding.php#gridSystem
Цитировать
не пойму как .span* в В2 работает с разными размерами.
В классе class="row" .span* задан в рх, в class="row-fluid" в %
Показать текстовый блок
Показать текстовый блок
Показать текстовый блок
Цитировать
Мне нужно в первом шаблоне при мобильном размере, чтобы блоки картинок вставали в ряд, как во втором шаблоне. Полазил в CSS, посравнивал, но кода много и пока не знаю за что зацепится, поскольку не пойму как .span* в В2 работает с разными размерами
"Резиновый макет вписывает сетку в размер экрана, потому и 2 колонки (float: left;),
т.е. при адаптивной верстке (как раз не резиновой) в зависимости от размера экрана вступают медиазапросы @media, вот они то и отменяют float: left;
Впрочем в бутстрап это все учтено
Показать текстовый блок
« Последнее редактирование: 25.03.2015, 20:59:46 от ShfVD » Записан
Deneb
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 22


« Ответ #2 : 26.03.2015, 12:56:52 »

ShfVD
Цитировать
В первом шаблоне класс ров-флуид (резиновый) во втором ров
http://bit.ly/1Gm2M8H
http://bit.ly/1Gm37YM
или наоборот, - почитай сетку бутстроап2
http://bootstrap-ru.com/scaffolding.php#gridSystem
В обоих шаблонах spanы обернуты в строковые классы .row-fluid которые судя по документации должны обеспечивать обтекаемость, span 6 означает что они должны стоять в две колонки, и только при уменьшении менее определенной ширины у второго шаблона срабатывает настроенный @медиа запрос, у первого нет. Класс .row там есть, но не в строке а в обертке всего компонента второго шаблона, который как раз работает как надо. У первого шаблона на компоненте стоит класс .grid-block, не знаю что это за класс.
Цитировать
В классе class="row" .span* задан в рх, в class="row-fluid" в %
Не совсем понял, если class="row" .span* задан в рх, то при уменьшении ширины блок с этим классом должен по идее оставаться одного размера а не изменяться пропорционально изменениям размера окна. Если имеется в виду (full-width) по аналогии с классом .container-fluid в В3, то тут да ширина в рх и при изменении ширины окна появляется прокрутка снизу окна браузера для просмотра всей страницы. Но тут оба шаблона адаптивные, у первого видимо просто не настроены @медиа запросы.
Цитировать
"Резиновый макет вписывает сетку в размер экрана, потому и 2 колонки (float: left;),
т.е. при адаптивной верстке (как раз не резиновой) в зависимости от размера экрана вступают медиазапросы @media, вот они то и отменяют float: left;[/quot
В каком конкретно файле можно подключить @медиа запросы, не подскажите, там они в нескольких файлах фигурируют? Я так предполагаю если прописать для .span @медиа запрос для (max-width: 767px) с параметром width: 100%, то при ширине менее 767px блоки должны будут складываться из двух столбиков в два ряда.
Записан
ShfVD
Живу я здесь
******

Репутация: +65/-0
Offline Offline

Пол: Мужской
Сообщений: 922



« Ответ #3 : 29.03.2015, 16:18:47 »

Цитировать
Я так предполагаю если прописать для .span @медиа запрос для (max-width: 767px) с параметром width: 100%, то при ширине менее 767px блоки должны будут складываться из двух столбиков в два ряда.
Используя Bootstrap2 так и есть ( ничено е нужно прописывать - см. под 3-м спойлером) - ширина все span
Код
     float: none; /* в стролбик */
   display: block;
   width: 100%;
 
Цитировать
Не совсем понял, если class="row" .span* задан в рх, то при уменьшении ширины блок с этим классом должен по идее оставаться одного размера а не изменяться пропорционально изменениям размера окна.
так и есть, но у Вас class="row-fluid" - на больших экранах работает как резиновый (в % сжимается/растягивается) а когда меньше 767рх
срабатывает@media (max-width: 767px). В полном Bootstrap.сss правило начиная со строки 5293.
Цитировать
у первого видимо просто не настроены @медиа запросы.
Скорее всего их просто нет ни в одном из CSS. Остается скопировать и добавить либо свой CSS (что более правильно - не слетит после обновлений) либо дописать в любой имеющийся.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet