Войти или зарегистрироваться
  • Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.
  • Вы находитесь в сообществе Rubukkit. Мы - администраторы серверов Minecraft, разрабатываем собственные плагины и переводим на различные языки плагины наших коллег из других стран.

  • Данный раздел создан исключительно для релизов! Вопросы по лаунчеру или обвязке задавайте ТОЛЬКО в соответсвующей теме автора. Любые другие темы будут удалены, а авторы понесут наказание.

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

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

enselerizer сказал(а):
Работаю над обновой 2.0 (мониторинг)
Нажмите, чтобы раскрыть...
Слушай, проблема. После тега <head> вставляю линк к Bootstrap'у (скрипт к нему) все идет наперекосяк, смещаются все элементы. Можно ли куда-то в другое место вставить скрипт?
 
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 сказал(а):
Напиши уроки для нубов как делать сайты на bootstrap :creeper:,чтобы они твои фишки знали куда совать).
Нажмите, чтобы раскрыть...

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

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

Glowing сказал(а):
Да курсов дохрена,но я уверен что серовно будут писать: А что такое Bootstrap и.т.д.
Нажмите, чтобы раскрыть...
Есть же >>> ЭТО <<<...
 
enselerizer сказал(а):
Всем привет!
Фишка 1: Делаем постраничную навигацию на bootstrap
image.png

У многих людей при создании кастомной панели навигации возникает вопрос:

Шаг 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.
Нажмите, чтобы раскрыть...
Я не понял, как сделать постраничную навигацию, как на скрине?
 
Прикольно лайк молодец полезные уроки людям даешь )
 
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. Лайкнул :D
​
Нажмите, чтобы раскрыть...
С новым Bootstrap не работает :(
 
Vladlen_198 сказал(а):
Могу помочь. Что именно интересует ?
Нажмите, чтобы раскрыть...
Спасибо, но уже решил проблему. Теперь половину шаблона переделывать, т.к. он не адаптирован под Bootstrap, соответственно всё съехало...
Vladlen_198 сказал(а):
Могу помочь. Что именно интересует ?
Нажмите, чтобы раскрыть...
Не знаете из-за чего шаблон мог поехать при установке Bootstrap?
 
BestMark сказал(а):
Спасибо, но уже решил проблему. Теперь половину шаблона переделывать, т.к. он не адаптирован под Bootstrap, соответственно всё съехало...

Не знаете из-за чего шаблон мог поехать при установке Bootstrap?
Нажмите, чтобы раскрыть...
Похожие названия классов
 
Кстате 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 шрифт стал более жирным. Как его вернуть?
Нажмите, чтобы раскрыть...
Меняй типографию, ищи в инете
 
(Вы должны войти или зарегистрироваться, чтобы ответить.)

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

Назад
Верх