Для получения полного доступа
зарегистрируйтесь.
RSS

Все сниппеты с тэгом «bootstrap»



Gravatar image
zabachok
  • Репутация: 2
  • Сниппеты: 1
  • Ревизии: 0
echo $form->field($model, 'is_bot')->radioList(['' => 'Все', false => 'Люди', true => 'Боты'], [
            'itemOptions' => ['class' => 'd-none', 'labelOptions' => ['class' => 'btn btn-primary']],
            'class' => 'btn-group',
            'data-toggle' => 'buttons',
        ])->label(false);

dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Как написали в комментариях к моему сниппету, 58kb довольно много для инпута от которого нужен только поиск.Правда этот вариант требует jQuery, но, нет проблем переписать на Vanila JS.

Покажу сразу результат того, что у нас получится:

А теперь, к делу. Для начала добавим общий скелет:

Продолжение »

dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Если вам нужно, чтобы открытый popover в Boostrap 3 по наведению не скрывался, пока курсор на самом popover, вам поможет следующее решение.

Демо 97f041fdf9247cf838713969b2855d0b.gif

Продолжение »

Gravatar image
opotemkin
  • Репутация: 11
  • Сниппеты: 4
  • Ревизии: 0

Для тех, кто использует bootstrap. Если есть некое множество Popover, а при клике необходимо активировать только один, при этом остальные скрывать. Есть простое решение, но даже документация не всем помогает :)

  1. Необходимо, чтобы data-trigger="focus", т.е.
    <a data-trigger="focus" data-toggle="popover">popover ссылка</a>
    

    или в коде js

    $('[data-toggle="popover"]').popover({
    trigger: 'focus'
    });
    
  2. Все элементы должны содержать tabindex="0" Т.е.
    <a tabindex="0" data-trigger="focus" data-toggle="popover">popover ссылка</a>
    

    Читайте внимательно документацию и применяйте :)

Gravatar image
dkrnl
  • Репутация: 17
  • Сниппеты: 2
  • Ревизии: 0

Данный пример попытка развеять заблуждение: "нельзя на bootstrap сделать сетку с нечетным количеством колонок"

// Откуда пошло название класса 2_4: 12/5 == 2.4, хак но рабочий. (: 
// При желании название могут изменены на более читаемые.
.five-cols-row {
    @five-cols-gutter: @grid-gutter-width; // отступ между колонками по умолчанию 30px, но можно обнулить
     .make-row(@five-cols-gutter); // используем мощь grid-framework.less
    .col-lg-2_4 {    
        .make-lg-column(2.4; @five-cols-gutter); // для lg-устройств
    }
    .col-md-2_4 {
        .make-md-column(2.4; @five-cols-gutter); // для md-устройств
    }
    .col-sm-2_4 {
        .make-sm-column(2.4; @five-cols-gutter); // для sm-устройств
    }
    .col-xs-2_4 {
        .make-xs-column(2.4; @five-cols-gutter); // для xs-устройств
    }
}

// Боллее красивый вариант
.content-row {
    @content-columns: (@grid-columns/5); // 12/5
    @content-gutter: @grid-gutter-width; // отступ между колонками по умолчанию 30px, но можно обнулить
     .make-row(@content-gutter); // используем мощь grid-framework.less
    > .col-content {
        .make-lg-column(@content-columns; @content-gutter); // для lg-устройств
        .make-md-column(@content-columns; @content-gutter); // для md-устройств
        .make-sm-column(@content-columns; @content-gutter); // для sm-устройств
        .make-xs-column(@content-columns; @content-gutter); // для xs-устройств
    }
}
dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Если вам не подходит это решение по каким-то своим причинам, и у вас большой список элементов в dropdown. Вы можете добавить обычный скролл списка:

4aab5b09613354a2e25c115a4e8dd84a.gif

Добавим класс scrollable

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu scrollable" aria-labelledby="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        ...
    </ul>
</div>

И последний шаг, css:

.dropdown-menu.scrollable {
    height: auto;
    max-height: 30em;
    overflow-x: hidden;
}
dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

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

Демо:

90f50d9015a147e83726cb2898ced68b.gif

Начнём с разметки:

<div class="btn-group dropup">
    <a type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-share-alt"></i>
    </a>
    <ul class="dropdown-menu arrow">
        <li><input class="form-control input-sm" value="http://gostash.ru" type="text"></li>
        <li><a href="#" class="social-likes" data-url="http://gostash.ru"><div class="twitter"> Twitter</div></a></li>
        <li><a href="#" class="social-likes" data-url="http://gostash.ru"><div class="facebook"> Facebook</div></a></li>
        <li><a href="#" class="social-likes" data-url="http://gostash.ru"><div class="vkontakte"> ВКонтакте</div></a></li>
        <li><a href="#" class="social-likes" data-url="http://gostash.ru"><div class="plusone"> Google+</div></a></li>
    </ul>
</div>

Важно! Для работы кнопки необходимо подключить bootstrap.min.js и также Font Awesome, который я использую для иконок соц. сетей. Вы можете этот шрифт не использовать, а заменить в классах .social-likes__button_название_соц_сети на нужную вам иконку. И последнее, Social Likes.

Осталось добавить css:

.social-likes__button > .social-likes__icon {
    font-family: 'FontAwesome', serif;
}

.social-likes__counter {
    background: #eee;
    margin-left: 0.5em;
    color: #555;
    font-size: 0.8em;
    font-weight: bold;
    display: inline-block;
	min-width: 1.5em;
	text-align: center;
}

.dropdown-menu.arrow input[type=text] {
    margin-left: 0.4em;
    width: 12.3em;
    margin-bottom: 0.3em;
    border-radius: 0.2em !important;
}

.dropdown-menu.arrow {
    margin-bottom: 1em;
}

.dropdown-menu.arrow:before {
    position: absolute;
    bottom: -10px;
    left: 9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right:10px solid transparent;
    border-top: 10px solid #ccc;
    font-size: 0;
    line-height: 0;
    content: '';
}

.dropdown-menu.arrow:after {
    position: absolute;
    bottom: -9px;
    left: 10px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #fff;
    font-size: 0;
    line-height: 0;
    content: '';
}

.social-likes__icon > span {
    position:relative;
    top:0;
    left:-3px;
    background-image: none !important;
}

.social-likes__button_twitter > span:before {
    content: "\f099";
    color: #00B7EC;
}

.social-likes__button_facebook > span:before {
    content: "\f082";
    color: #425497;
}

.social-likes__button_vkontakte > span:before {
    content: "\f189";
    color: #526E8F;
}

.social-likes__button_plusone > span:before {
    content: "\f0d5";
    color: #DD4241;
}
dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Вдохновился примером в Codrops, добавил стили как в Bootstrap 3, а также кнопка доступна в трёх размерах — большой, средний, маленький.

Демо:

3oEdv9ziUv0s6RgtPy.gif

Я использую Font Awesome, если вы используете что-то другое в качестве иконки заменили название класса для элемента <i>.

Сделаем разметку страницы:

<input type="file" name="file-lg" id="file-lg" class="file-select file-select-lg"/>
<label for="file-lg" class="filename"><i class="fa fa-arrow-circle-o-up"></i>
    Выберите файл...
</label>

<input type="file" name="file" id="file" class="file-select"/>
<label for="file"><i class="fa fa-arrow-circle-o-up"></i>
    Выберите файл...
</label>

<input type="file" name="file-sm" id="file-sm" class="file-select file-select-sm"/>
<label for="file-sm"><i class="fa fa-arrow-circle-o-up"></i>
    Выберите файл...
</label>

Добавим js, для отображения имени выбранного файла (необходим jQuery):

$(function() {
    $("input:file").change(function (){
        var fileName = $(this).val().split( '\\' ).pop();
        $(this).next('label').html('<i class="fa fa-file"></i> ' + fileName);
    });
});
.file-select {
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.file-select.file-select-lg + label {
  padding: 10px 10px;
  font-size: 18px;
}

.file-select + label {
  font-size: 14px;
  display: inline-block;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 3px;
}

.file-select.file-select-sm + label {
  font-size: 12px;
  padding: 5px 10px;
}

.file-select:focus + label,
.file-select + label:hover {
  background: #ccc;
}
Gravatar image
Nepster
  • Репутация: 151
  • Сниппеты: 19
  • Ревизии: 0

Bootstrap 3 модальное окно по центру.

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
Bran
  • Репутация: 29
  • Сниппеты: 7
  • Ревизии: 0

Задача

Иногда, нам нужно пояснить пользователю как всё устроено на нашем сайте (например, сложные формы, CRM, редакторы).

Для этого отлично подходят туры. Заходите на сайт, и вам на странице показывают с помощью шагов для чего нужен каждый элемент. Следуя трендам, показываю как это работает:

l41lHYxV4FjGmaoeI.gif

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

Решение

На деле всё очень просто. Скачиваем, Bootstrap Tour, подключаем скрипты:

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-tour.min.css" rel="stylesheet">

<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-tour.min.js"></script>

Теперь добавим шаги в наш скрипт:

var tour = new Tour({
    steps: [
        {
            element: "#element-1",
            title: "Шаг 1",
            content: "Текст для первого шага"
        },
        {
            element: "#element-2",
            title: "Шаг 2",
            content: "Текст для второго шага"
        }
    ]});

tour.init();
tour.start();