Помощник
|
Шаблон на bootstrap |
Den1xxx
|
Сообщение
#1
|
||
|
|
||
|
|||
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
|
Сообщение
#3
|
|
И надо, чтобы страница была на всю ширину? Ну как бы да. Но ведь под bootstrap можно быстро переключиться из резинового в фиксированный, поменяв названия классов? Конечная цель — после инициализации bootstrap шаблона и загрузки необходимых css/fonts/js добавить свой css-файлик, переключающий цвета, резиновость/фиксированность дизайна и ширину основных центральных колонок (от 0 до 100%). Как в общем-то и все делают. Но вот только почему-то стандартных шаблонов, используемых на 99% сайтов (простой 2-3 колоночный дизайн), в примерах bootstrap нет. //upd не заметил ответа Спасибо, посмотрю |
|
|
FreeMasiK |
31.12.2013, 13:51;
Ответить: FreeMasiK
Сообщение
#4
|
|
В третьем бутстрапе просто поменяв классы нельзя уже.
По умолчанию резиновый. В примере строчку забыл одну добавить. <meta name="viewport" content="width=device-width, initial-scale=1.0"> Для мобил |
|
|
Den1xxx
|
Сообщение
#5
|
|
|
|
|
FreeMasiK |
31.12.2013, 13:57;
Ответить: FreeMasiK
Сообщение
#6
|
|
Можно это реализовать, если создать класс, в котором будет отключаться резиновость.
Вот тут описано, как выключить её. И есть пример. Во второй версии это делалось сменой класса. В третьей .container-fluid удалили |
|
|
Den1xxx
|
Сообщение
#7
|
|
Спасибо.
Догрузить к бутстрапу 2 правила в отдельном файлике ещё проще, чем менять классы: [CSS].container { max-width: none !important; width: 970px; } [/CSS] |
|
|
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> .container { ****max-width: none !important; ****width: 970px; } Так лучше не делать, это слишком в лоб. |
|
|
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
|
Сообщение
#10
|
|
устанавливаете 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 | karambas | 3579 | 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 |
Текстовая версия | Сейчас: 29.3.2024, 13:53 |