Вопрос по twitter-bootstrap, twitter-bootstrap-3, responsive-design – изменить размер кнопок в начальной загрузке

19

Я использую начальную загрузку, и CSS отзывчив, поэтому он хорошо масштабируется на небольших устройствах. Тем не менее, я хотел бы, чтобы кнопки тоже уменьшались, когда область просмотра меньше (например, на мобильном телефоне).

<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" >Edit</button>

В основном на меньших устройствах класс btn-xs должен быть добавлен ко всем кнопкам.

Я, вероятно, могу сделать это через Jquery, но мне было интересно, если у начальной загрузки уже была эта функциональность?

Ваш Ответ

3   ответа
32

чтобы соответственно масштабировать кнопки.

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}

Демо-версия:http://bootply.com/93706

Обновление для Bootstrap 4:
Bootstrap 4 отзывчивый размер кнопки

2

trap LESS, вы также можете использовать миксины.

Если вы загляните внутрь папки LESS Bootstrap(bootstrap > less > mixins) вы увидитеbuttons.less файл. Если вы откроете это, вы найдете.button-size() Mixin.

Вот миксин:

.button-size(
    vertical padding;
    horizontal padding;
    font size;
    line height;
    border-radius
);

Вот как вы динамически создаете кнопку:

Вам нужно будет передать определенные параметры. Будет тормозить, если один отсутствует

.button-size(10px; 10px; 1em; 1.5em; 0);

Вот пример использования существующих переменных Bootstrap LESS:

    .btn {
        @media (min-width: @screen-sm-min) {
            .button-size(
                @padding-small-vertical;
                @padding-small-horizontal;
                @font-size-small;
                @line-height-base;
                @border-radius-small
            );
        }
        @media (min-width: @screen-md-min) {
            .button-size(
                @padding-large-vertical;
                @padding-large-horizontal;
                @font-size-large;
                @line-height-base;
                @border-radius-large
            );
        }
    }
1

Расширяем ответ ZimSystem ..

@media (max-width: 768px) {
  .btn {
    font-size:11px;
    padding:4px 6px;
  }
}

@media (min-width: 768px) {
  .btn {
    font-size:12px;
    padding:6px 12px;
  }
}

@media (min-width: 992px) {
  .btn {
    font-size:14px;
    padding:8px 12px;
  }
}

@media (min-width: 1200px) {
  .btn {
    padding:10px 16px;
    font-size:18px;
  }
}

Похожие вопросы