X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Добавить ответ в эту тему
> Шаблон на bootstrap
Den1xxx
Den1xxx
Topic Starter сообщение 31.12.2013, 10:53; Ответить: Den1xxx
Сообщение #1


Здравствуйте.

Пробовал разобраться с последним bootstrap, чтобы создать на нём такой типовой шаблон:

[attachment=39985:site_structure.png]

Не получилось — глючит. Оказалось что проще свой самописный сверстать.
Однако в bootstrap есть модальные окна, шрифтовые значки и подобная хрень.
И ещё — в случае маленького экрана три средние колонки выстраиваются в ряд — вроде под bootstrap это не сложно сделать.
Потому нужен именно вариант под bootstrap.

Гугление ничего не дало — все примеры сводятся к однотипному двухколоночному дизайну с верхней менюхой.

Может у кого-нибудь есть рабочий пример с подобным расположением блоков?
Или если нет, то кто-то сможет написать за деньги?

Понимаю, что как-бы вопрос не сложный, но у меня почему-то не получилось сделать. То блоки разваливаются, то дизайн не адаптивный к мобильным устройствам.

Прошу помощи.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FreeMasiK
FreeMasiK
сообщение 31.12.2013, 13:34; Ответить: FreeMasiK
Сообщение #2


И надо, чтобы страница была на всю ширину?

Вот посмотри.
Тут футер не прибит к низу. Если что, то надо поправить.

style.css
[CSS]
.main {
width: 100%;
}

.header {
background-color: red;
min-height: 100px;
}

.content {

}

.content div {
min-height: 300px;
}

.content :nth-child(1) {
background-color: #ffff00;
}
.content :nth-child(2) {
background-color: darkmagenta;
}
.content :nth-child(3) {
background-color: tomato;
}

.footer {
min-height: 100px;
background-color: #006687;
}
[/CSS]

boot.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container main">
<div class="row header">
<div class="col-md-12"></div>
</div>
<div class="row content">
<div class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
</div>
<div class="row footer">
<div class="col-md-12"></div>
</div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
Topic Starter сообщение 31.12.2013, 13:49; Ответить: Den1xxx
Сообщение #3


(FreeMasiK @ 31.12.2013, 16:34) *
И надо, чтобы страница была на всю ширину?

Ну как бы да.

Но ведь под bootstrap можно быстро переключиться из резинового в фиксированный, поменяв названия классов?

Конечная цель — после инициализации bootstrap шаблона и загрузки необходимых css/fonts/js добавить свой css-файлик, переключающий цвета, резиновость/фиксированность дизайна и ширину основных центральных колонок (от 0 до 100%).
Как в общем-то и все делают. Но вот только почему-то стандартных шаблонов, используемых на 99% сайтов (простой 2-3 колоночный дизайн), в примерах bootstrap нет.

//upd не заметил ответа
Спасибо, посмотрю
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FreeMasiK
FreeMasiK
сообщение 31.12.2013, 13:51; Ответить: FreeMasiK
Сообщение #4


В третьем бутстрапе просто поменяв классы нельзя уже.
По умолчанию резиновый.


В примере строчку забыл одну добавить.
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Для мобил
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
Topic Starter сообщение 31.12.2013, 13:54; Ответить: Den1xxx
Сообщение #5


(FreeMasiK @ 31.12.2013, 16:51) *
В третьем бутстрапе просто поменяв классы нельзя уже.
По умолчанию резиновый.

Нельзя не наше слово.
Наверное всё же можно, иначе зачем вообще сыр-бор, если нет гибкости?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FreeMasiK
FreeMasiK
сообщение 31.12.2013, 13:57; Ответить: FreeMasiK
Сообщение #6


Можно это реализовать, если создать класс, в котором будет отключаться резиновость.
Вот тут описано, как выключить её.
И есть пример.

Во второй версии это делалось сменой класса.
В третьей .container-fluid удалили
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
Topic Starter сообщение 31.12.2013, 14:03; Ответить: Den1xxx
Сообщение #7


Спасибо.
Догрузить к бутстрапу 2 правила в отдельном файлике ещё проще, чем менять классы:
[CSS].container {
max-width: none !important;
width: 970px;
}
[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 26.3.2014, 13:12; Ответить: Degradator
Сообщение #8


Игрался с бутстрапом, вот что вышло
<div class="container">
<div class="row">
<div class="col-lg-12">
Шапка
</div>
<div class="col-lg-8 col-md-6 col-sm-4 col-xs-12 col-xs-push-0 col-sm-push-4 col-md-push-3 col-lg-push-2 ">
<pre>lorem ipsum dolorumlorem ipsum dolorumlorem ipsum dolorumlorem ipsum dolorumlorem ipsum dolorumlorem ipsum dolorum</pre></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6
col-xs-pull-0 col-sm-pull-4 col-md-pull-6 col-lg-pull-0 col-lg-push-2">меню левое</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-lg-pull-10 col-md-pull-0"> меню правое </div>

</div>
</div>


(Den1xxx @ 31.12.2013, 17:03) *
.container {
****max-width: none !important;
****width: 970px;
}

Так лучше не делать, это слишком в лоб.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Arks
Arks
сообщение 26.3.2014, 22:34; Ответить: Arks
Сообщение #9


устанавливаете Less-интерпретатор. Качаете бутстрап с гитхаба. Заходите в папочку less, смотрите что такое бутстрап(https://github.com/twbs/bootstrap/blob/mast.../bootstrap.less), меняете настройки переменных (https://github.com/twbs/bootstrap/blob/mast.../variables.less) и все остальное как левой пятке захочится. Компилируете. Вооля - кастомизированная бячка готова! :evrika:
ИМХО делать как-то иначе, например перекрывать стили бутстрапа своими - это как учить любви резиновую женщину.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
Topic Starter сообщение 26.3.2014, 23:27; Ответить: Den1xxx
Сообщение #10


(Arks @ 27.3.2014, 01:34) *
устанавливаете Less-интерпретатор

Вот как раз это и невозможно на 99% виртуальных хостингов.
Поэтому я делаю проще — отдаю гдавный css файл с помощью php:
<link rel="stylesheet" href="./skins/websat/" type="text/css" />


А внутри style.css.php
[PHP]<?php
$css_file = '../../content/skins/'.basename(dirname(__FILE__)).'.ini';
if (is_file($css_file)) $css_config = unserialize(file_get_contents($css_file));
else include('style.default.php');

header("Content-type: text/css; charset: UTF-8");
echo'
body {
margin: 0;
padding: 0;
background: '.$css_config['Body background color'].';
font-family: '.$css_config['Font family'].';
font-size: '.$css_config['Primary font size, px'].'px;';
// и далее понеслась как обычно:)[/PHP]

Никаких неудобств — то же использование переменных, хранение настроек в ини-файле, интерактивное изменение шаблона и прочие плюшки. Всё на стороне сервера, т.е. от клиента не зависит.
В style.default.php храним переменные по-умолчанию — если пользователь заредактировался и безнадежно испортил шаблон, перезаписываем переменными по-умолчанию.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужно отрисовать шаблон сайта
2 karambas 3578 6.7.2022, 20:27
автор: Freedo
Открытая тема (нет новых ответов) Сколько стоит сделать шаблон для WP?
изучаю цены
3 Palundra 2379 2.4.2022, 3:06
автор: WebSuccessful
Открытая тема (нет новых ответов) Установить Wordpress + iBid шаблон
0 wep 4280 23.11.2021, 13:54
автор: wep
Открытая тема (нет новых ответов) Платный продам шаблон wordpress (недорого)
0 sheva7 3737 13.11.2021, 0:39
автор: sheva7
Открытая тема (нет новых ответов) Шаблон для работы с farpost
Автоматизация работы, поднятие объявлений по времени
0 Gallattam 905 30.1.2021, 13:58
автор: Gallattam


 



RSS Текстовая версия Сейчас: 29.3.2024, 1:27
Дизайн