Веб Интегрируем bootstrap с сайтом dle, или много полезных фишек для молодых серверов

enselerizer · 27 апр 2013

Работаю над обновой 2.0 (мониторинг)

MineMan910 · 12 май 2013

enselerizer сказал(а): ↑

Работаю над обновой 2.0 (мониторинг)
Нажмите, чтобы раскрыть...

Слушай, проблема. После тега <head> вставляю линк к Bootstrap'у (скрипт к нему) все идет наперекосяк, смещаются все элементы. Можно ли куда-то в другое место вставить скрипт?

enselerizer · 13 май 2013

MineMan910 сказал(а): ↑

Слушай, проблема. После тега <head> вставляю линк к Bootstrap'у (скрипт к нему) все идет наперекосяк, смещаются все элементы. Можно ли куда-то в другое место вставить скрипт?
Нажмите, чтобы раскрыть...

Проблема распространённая, но легко решаемая.

1. Зайди сюда, собери себе бутстрап.
2. Выдели только Progress bars и Labels and badges в 1 шаге, Transitions (необходим для анимации) - во втором.
3. Скачай сборку, поставь себе на сайт.
4. Заинлудь в <head>.
5.???
6.PROFIT!!

Кстати, если ты не скачал сборку без библиотек, то в самом скрипте уже есть бутстрап. В таком случае тебе надо будет заменить содержимое папки bootstrap на ту сборку, которую ты сделал выше. Эти все траблы я уберу в 2.0, ибо там будет вшит сам класс а не бутстрап. Но она у меня к сожалению не хочет работать, поэтому время релиза отодвигается.

Но а если же говорить не про мониторинг, а про, собственно, тему этого топика , то тебе надо повторить шаги 1-6, только во 2 шаге указать элементы, которые нужны.

Это уже траблы самого бутстрапа, и как исправить их я не знаю...

Glowing · 29 май 2013

Напиши уроки для нубов как делать сайты на bootstrap ,чтобы они твои фишки знали куда совать).

ATOS · 8 июл 2013

Up :3

enselerizer · 9 июл 2013

Glowing сказал(а): ↑

Напиши уроки для нубов как делать сайты на bootstrap ,чтобы они твои фишки знали куда совать).
Нажмите, чтобы раскрыть...

Ну, я врятли буду писать курсы, но можно самому научиться, причём быстро и "безболезненно":
Есть этот миникурс по вёрстке элементов на bootstrap, а так же это, это, это и это руководство (это не отдельные руководства, а части одного) по использованию каждого элемента. Остаётся только комбинировать элементы, тут даже знания HTML не требуется. В руководстве уже предоставлен код для вставки, а в видеокурсе показаны все тонкости. Ну а если всё равно не помогает - есть htmlbook.ru, там в лёгкой форме есть описание каждого тэга HTML и CSS.

Glowing · 10 июл 2013

enselerizer сказал(а): ↑

Ну, я врятли буду писать курсы, но можно самому научиться, причём быстро и "безболезненно":
Есть этот миникурс по вёрстке элементов на bootstrap, а так же это, это, это и это руководство (это не отдельные руководства, а части одного) по использованию каждого элемента. Остаётся только комбинировать элементы, тут даже знания HTML не требуется. В руководстве уже предоставлен код для вставки, а в видеокурсе показаны все тонкости. Ну а если всё равно не помогает - есть htmlbook.ru, там в лёгкой форме есть описание каждого тэга HTML и CSS.
Нажмите, чтобы раскрыть...

Да курсов дохрена,но я уверен что серовно будут писать: А что такое Bootstrap и.т.д. И ты написал "даже знания HTML не требуются" как же не требуются? как раз таки многие теги там используются и их приходишься писать. Не зря bootstrap использует html5

enselerizer · 10 июл 2013

Glowing сказал(а): ↑

ты написал "даже знания HTML не требуются" как же не требуются? как раз таки многие теги там используются и их приходишься писать. Не зря bootstrap использует html5
Нажмите, чтобы раскрыть...

Лично я уже писал простейшие шаблоны на bootstrap, когда не знал, что такое <body>.
В руководстве, которое я предложил, представлен код каждого элемента. Даже без знаний HTML, если человек обладает логикой, то он сможет легко разобраться. Это как конструктор LEGO. Даже если ты в первый раз берёшь в руки детальки, ты уже можешь собрать кубик.

Glowing сказал(а): ↑

Да курсов дохрена,но я уверен что серовно будут писать: А что такое Bootstrap и.т.д.
Нажмите, чтобы раскрыть...

Есть же >>> ЭТО <<<...

DrCheater · 30 авг 2013

enselerizer сказал(а): ↑
Всем привет!
Фишка 1: Делаем постраничную навигацию на bootstrap

У многих людей при создании кастомной панели навигации возникает вопрос:
Шаг 1 - лезем в bootstrap.css
Для начала откроем файл bootstrap.css, лежащий в папке css в дистрибутиве bootstrap'a.
Что бы было удобнее искать, заходим сюда и оставляем только галочки
Buttons и Button groups and dropdowns
(второе нужно, только если вы хотите сделать группу кнопок)

Ищем в bootstrap.css
Код:
.btn {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
 
  *zoom: 1;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #333333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #e6e6e6;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
 
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  border: 1px solid #cccccc;
  *border: 0;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  *margin-left: .3em;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
Видите, сколько писанины?
Копируем это в пустой файл .css, и изменяем .btn в начале на что угодно, например .ensnavbar.
Теперь вместо ".ensnavbar {" вставляем ".ensnavbar a {".
Таким образом мы применим стиль только к ссылкам (а значит, к каждой ссылке по-отдельности).

Шаг 2 - настраиваем стиль на кнопки при наведении, и на активные кнопки.
Пропустим несколько строк после нашего первого стиля.
Теперь пишем
Код:
.ensnavbar a:hover {
 
}
И между "{" и "}" вставляем содержимое ".ensnavbar a {" и "}".
После этого нам надо сделать так, что бы при наведении цвет был другим.
Ищем классы, отвечающие за цвет, например класс .btn-primary.
Копируем его содержимое (как мы уже поняли, содержимое - это то, что стоит между "{" и "}"), и вставляем в .ensnavbar a:hover {}, при том если там будет несколько одинаковых параметров с разными значениями, например background: #000000 и background: #111111, то надо заменить те, которые мы вставили ранее на те, что мы скопировали из класса с цветом.

Уже практически готово!
Теперь пропускаем несколько строк ниже, и пишем
Код:
.ensnavbar span {
 
}
Этим мы применим стиль к тэгу span, в который помещается номер текущей страницы и многоточие, если страниц много.

Вставляем в .ensnavbar span {} содержимое .ensnavbar a {}.
Теперь повторяем операцию со a:hover - подыскиваем себе класс цвета, я взял оранжевый (btn-warning), и вставляем содержимое этого класса в .ensnavbar span {}, заменяя старые параметры новыми.

Если вы так же хотите сделать кнопки другого размера, то во все 3 класса, которые мы сделали, копируем содержимое класса размера, например btn-mini, опят ь же заменяя старые параметры новыми.

Шаг 3 - Пихаем на сайт:
Для начала, сохраним наш файл .css, назовём его как хотим.
Теперь заливаем его на свой сервер (туда, где лежит сайт).
Заходим в админку DLE, список всех разделов --> шаблоны сайта.
Выбираем основной шаблон, в 99.9% случаев это main.tpl.
Находим так тег <head>, и после него на следующей строке пишем:
Код:
<link href="путь к вашему файлу .css" rel="stylesheet" media="screen">
Притом, если у вас фал лежит по адресу например "123.ru/navbar/file.css",
то путь к файлу должен иметь вид "navbar/file.css".

Так же, если у вас не подключён bootstrap, надо залить оригинальную библиотеку bootstrap'a (папки img, css, js) в корень сайта и прописать после <head>:
Код:
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 
    <script src="js/bootstrap.min.js"></script>
Ну и теперь самое лёгкое.

Находим шаблон, в котором у вас лежит навбар, в 90% случаев это navigation.tpl.
И ставим туда код следующего вида:
Код:
[prev-link]<span class="btn btn-success">Назад</span>[/prev-link] <span class='ensnavbar'>{pages}</span>  [next-link]<span class="btn btn-success">Вперед</span>[/next-link]
 
Здесь видно, что у нас {pages} (список страниц) помещён в тег span с нашим старым добрым классом ensnavbar. Так же, я поместил кнопки "Вперёд" и "Назад" в обычные кнопки bootstrap'a.
Нажмите, чтобы раскрыть...
Я не понял, как сделать постраничную навигацию, как на скрине?

Blizzangels · 30 авг 2013

UP

DrCheater · 30 авг 2013

UPчхи

Extreme123 · 12 окт 2013

Очень полезный урок для тех, кто хочет шаблон на bootstrap.

enselerizer · 17 апр 2014

Апаю тему, давно уже не было просмотров.

evron · 17 апр 2014

Прикольно лайк молодец полезные уроки людям даешь )

BestMark · 21 ноя 2014

enselerizer сказал(а): ↑
1. Качаем бутстрап отсюда. Если надо кастомизировать (убрать те или иные компоненты), заходим сюда.
2. Выкачиваем папки img, js, css в корень сайта.
3. Пишем после тега <head> в main.tpl в шаблонах сайта DLE:
Код:
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
P.S. Лайкнул
Нажмите, чтобы раскрыть...
С новым Bootstrap не работает

Vladlen_198 · 21 ноя 2014

BestMark сказал(а): ↑

С новым Bootstrap не работает
Нажмите, чтобы раскрыть...

Могу помочь. Что именно интересует ?

BestMark · 21 ноя 2014

Vladlen_198 сказал(а): ↑

Могу помочь. Что именно интересует ?
Нажмите, чтобы раскрыть...

Спасибо, но уже решил проблему. Теперь половину шаблона переделывать, т.к. он не адаптирован под Bootstrap, соответственно всё съехало...

Vladlen_198 сказал(а): ↑

Могу помочь. Что именно интересует ?
Нажмите, чтобы раскрыть...

Не знаете из-за чего шаблон мог поехать при установке Bootstrap?

Vladlen_198 · 21 ноя 2014

BestMark сказал(а): ↑

Спасибо, но уже решил проблему. Теперь половину шаблона переделывать, т.к. он не адаптирован под Bootstrap, соответственно всё съехало...

Не знаете из-за чего шаблон мог поехать при установке Bootstrap?
Нажмите, чтобы раскрыть...

Похожие названия классов

BestMark · 21 ноя 2014

Vladlen_198 сказал(а): ↑

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

Заметил, что после установки Bootstrap шрифт стал более жирным. Как его вернуть?

Vladlen_198 · 21 ноя 2014

Кстате bootstrap к dle не обязательно так подключать
enselerizer сказал(а): ↑
1. Качаем бутстрап отсюда. Если надо кастомизировать (убрать те или иные компоненты), заходим сюда.
2. Выкачиваем папки img, js, css в корень сайта.
3. Пишем после тега <head> в main.tpl в шаблонах сайта DLE:
Код:
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
Нажмите, чтобы раскрыть...
Можно и так просто закинуть в папку шаблона и в head прописать
<link rel="stylesheet" href="{theme}/css/bootstrap.min.css">
<script src="{theme}/js/bootstrap.min.js"></script>

BestMark сказал(а): ↑

Заметил, что после установки Bootstrap шрифт стал более жирным. Как его вернуть?
Нажмите, чтобы раскрыть...

Меняй типографию, ищи в инете

Войти или зарегистрироваться

Веб Интегрируем bootstrap с сайтом dle, или много полезных фишек для молодых серверов

Как думаете, надо продолжать писать уроки?

Да, мне это очень нужно!

Да, это поможет новичкам.

Нет, это полный бред

Нет, мне вообще bootstrap не нравится.

А што значет слово "уроки"?

Продолжай писать! (Наберем 50 голосов - продолжу)

enselerizer Старожил Пользователь

MineMan910 Старожил Пользователь

enselerizer Старожил Пользователь

Glowing Старожил Пользователь

ATOS Старожил Пользователь

enselerizer Старожил Пользователь

Glowing Старожил Пользователь

enselerizer Старожил Пользователь

DrCheater Старожил Пользователь

Blizzangels Старожил Пользователь

DrCheater Старожил Пользователь

Extreme123 Старожил Пользователь

enselerizer Старожил Пользователь

evron Активный участник Пользователь

BestMark Старожил Пользователь

Vladlen_198 Старожил Пользователь

BestMark Старожил Пользователь

Vladlen_198 Старожил Пользователь

BestMark Старожил Пользователь

Vladlen_198 Старожил Пользователь

Поделиться этой страницей