Новая тема   Ответить

 S_Flash
Т.е. можно ли увеличить размер шрифта для чисто sm устройств в сетке, а для остальных оставить как есть по умолчанию?

 sk://ed
Если мне память не изменяет, бутстрап на em единицах. В этом случае просто меняешь размер шрифта на body, на нужной тебе ширине. Ну допустим 768:

Код:

Можно импортант влепить для уверенности)


added: вместо body может будет работать с html, честно - не помню, обычно все же задача ювелирно размеры настраивать, а не массово их менять)

Последний раз редактировалось: sk://ed (27/11/17 в 12:44), всего редактировалось 1 раз

 Axel
Предположу, что через свойства @media для этого размера. т.е. вставить в эту @media {} свой размер шрифта.

ЗЫ пока писал, ответили уже

 S_Flash
Думал у бутстрапа есть свои тулзы типа как для сетки.

 Smarty

Есть, почему нет.
Смотри переменные _variables.scss
Там раздел fonts
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;

4 бутстрап если что.

 S_Flash
Smarty: ну это вроде же компилятся дефолтные шоифты для каждого устройства.
Может я не точно выразился. Надо так: У меня есть ячейка в которой и только в ней надо увеличить шрифт, когда устройство sm откроет страницу. Т.е. должно быть что-то типа
<div class="font-size-sm-increase-2 col-sm-..."></div>, где font-size-sm- - это детектится размер экрана, а -increase-2 - это вымышленый множитель размера шрифта.
или так
<div class="font-size-sm-xlarge col-sm-..."></div>

Ну а когда браузер вернётся в md,lg.. или ещё больше сузится до xs, то шрифт этой ячейки переключается в дефолтный.

 sk://ed
S_Flash: чтобы у тебя получилось то, что ты хочешь тебе нужно назначить дефолтный размер шрифта для контейнера в котором ты собрался менять. И нужно чтобы вложенные элементы были в em единицах.

Затем на этот контейнер уже применять медиа, в котором менять размер шрифта. Изменение отразится на размере шрифта вложенных в контейнер элементов, если они в em.

https://jsfiddle.net/e8w8zkk8/ (сожми в 768, увидишь о чем я).

Если вопрос был в том, есть ли это дефолтом в бутстрапе? - я сомневаюсь, но я никогда не был его большим фанатом, могу ошибаться.

 S_Flash
sk://ed: ок, я просто знаю как это среализовать на чистом css. Вопрос именно не выходить за рамки бутстрапа. Так по чуть-чуть лепишь на него костылики, а, затем, пробуешь поменять тему и всё рухнуло к ебеням!

 Smarty
Чтобы не выxодить за рамки Б лучше посмотреть туторы на сайте самого Б и пару обучалок чтобы систематизировать знания.
А что касается твоей идеи. Систему гридов Б можно посмотреть в файле bootstrap-grid.css /ну либо в полном файле Б/ Из него видно как строятся гриды.
Пример кода

.col-1 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 8.333333%;
      -ms-flex: 0 0 8.333333%;
          flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 16.666667%;
      -ms-flex: 0 0 16.666667%;
          flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  max-width: 25%;
}


То есть все классы col-md-1, col-xl-3 и т.д. описаны в нем явно. Значит и твои манипуляции со шрифтами нужно будет прописать в своем плагине в явном виде для разныx вариантов media /как правильно написал sk://ed/.
Но чтобы не костылить такую систему можно пользоваться иерарxией классов /правильнее конечно назвать это иерарxией html элементов/.
Что то типа

.input-group-sm > .input-group-btn > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

Так реализуется уменьшение шрифта в кнопкаx для small дисплеев.
У тебя это может быть что то типа container->row->col-sm-3 = font-size: 0.5rem; Но прописывать такое для всей грид системы конечно будет очень громоздко, поэтому нужно исxодить из задачи и здравого смысла.