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

enselerizer · Apr 27, 2013

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

MineMan910 · May 12, 2013

enselerizer said: ↑

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

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

enselerizer · May 13, 2013

MineMan910 said: ↑

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

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

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

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

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

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

Glowing · May 29, 2013

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

ATOS · Jul 8, 2013

Up :3

enselerizer · Jul 9, 2013

Glowing said: ↑

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

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

Glowing · Jul 10, 2013

enselerizer said: ↑

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

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

enselerizer · Jul 10, 2013

Glowing said: ↑

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

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

Glowing said: ↑

Да курсов дохрена,но я уверен что серовно будут писать: А что такое Bootstrap и.т.д.
Click to expand...

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

DrCheater · Aug 30, 2013

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

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

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

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

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

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

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

Так же, если у вас не подключён bootstrap, надо залить оригинальную библиотеку bootstrap'a (папки img, css, js) в корень сайта и прописать после <head>:
Code:
    <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.
И ставим туда код следующего вида:
Code:
[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.
Click to expand...
Я не понял, как сделать постраничную навигацию, как на скрине?

Blizzangels · Aug 30, 2013

UP

DrCheater · Aug 30, 2013

UPчхи

Extreme123 · Oct 12, 2013

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

enselerizer · Apr 17, 2014

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

evron · Apr 17, 2014

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

BestMark · Nov 21, 2014

enselerizer said: ↑
1. Качаем бутстрап отсюда. Если надо кастомизировать (убрать те или иные компоненты), заходим сюда.
2. Выкачиваем папки img, js, css в корень сайта.
3. Пишем после тега <head> в main.tpl в шаблонах сайта DLE:
Code:
<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. Лайкнул
Click to expand...
С новым Bootstrap не работает

BestMark · Nov 21, 2014

Vladlen_198 said: ↑

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

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

Vladlen_198 said: ↑

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

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

BestMark · Nov 21, 2014

Vladlen_198 said: ↑

Похожие названия классов
Click to expand...

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

BestMark · Nov 21, 2014

Vladlen_198 said: ↑

Кстате bootstrap к dle не обязательно так подключать

Можно и так просто закинуть в папку шаблона и в head прописать
<link rel="stylesheet" href="{theme}/css/bootstrap.min.css">
<script src="{theme}/js/bootstrap.min.js"></script>[DOUBLEPOST=1416588495,1416587787][/DOUBLEPOST]
Меняй типографию, ищи в инете
Click to expand...

Ничего нормального на тему "как поменять типографию" не нашло.[DOUBLEPOST=1416596669][/DOUBLEPOST]

Vladlen_198 said: ↑

Кстате bootstrap к dle не обязательно так подключать

Можно и так просто закинуть в папку шаблона и в head прописать
<link rel="stylesheet" href="{theme}/css/bootstrap.min.css">
<script src="{theme}/js/bootstrap.min.js"></script>[DOUBLEPOST=1416588495,1416587787][/DOUBLEPOST]
Меняй типографию, ищи в инете
Click to expand...

Можно поподробнее? Написал в Google "как поменять типографию". В ответ мне ничего подходящего не выдало.

BestMark · Nov 21, 2014

Vladlen_198 said: ↑

Ладно держи кастомизируй bootstrap как хочешь http://getbootstrap.com/customize/
Click to expand...

Та же фигня.
До установки Bootstrap:

После установки Bootstrap:

Log in or Sign up

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Share This Page

Скачать

Members

Useful Searches