Как мне легко увеличить размер шрифта всех элементов формы в системе Twitter начальной загрузки CSS? - PullRequest
Новая
       26

Как мне легко увеличить размер шрифта всех элементов формы в системе Twitter начальной загрузки CSS?

3 голосов
/ 02 апреля 2012

http://twitter.github.com/bootstrap/base-css.html#forms

У меня есть простая горизонтальная форма, подобная их примеру с метками и полями ввода текста.Как сделать так, чтобы все метки имели размер шрифта: 24 пикселя и все входные данные нужной высоты и т. Д. Мне также нужно увеличить зашифрованное поле шириной 140 пикселей, чтобы метки не переносились.То есть я ищу лучший способ сказать: больше!

Ответы [ 3 ]

2 голосов
/ 02 апреля 2012

Загрузчик Twitter использует less для компиляции кода, но они также позволяют изменять некоторые параметры через пользовательский интерфейс и загружать настроенную версию.Если вам не хватает этих опций, вам нужно настроить меньше и выполнить настройку / компиляцию самостоятельно.

2 голосов
/ 04 апреля 2012

Предполагая, что у вас есть правильные настройки, создайте «filename» .css.scss и используйте компас для просмотра файла (это преобразует его в эквивалент CSS).

Затем в вашем _ _. Css.scss, выполните следующие действия:

1) $baseFontSize: 24px; @import "bootstrap"; Это изменяет размер всех шрифтов, но, исходя из вашего вопроса, я предполагаю, что это все, что вас волнует.

2) Не уверен, что вы имеете в виду, делая ввод правильной высоты.Но вы можете использовать mixin .box-sizing () (http://twitter.github.com/bootstrap/less.html) или установить высоту нижнего уровня вашего элемента ввода так, чтобы она соответствовала вашей метке, например: 

input{position: relative; bottom: 5px;}

3), чтобы метки не переносились,поместите вашу форму в div с class = "liquid-container spanX", где X - это любое количество сеток, которое вам нужно.

Compass создаст файл css, из которого вы сможете скопировать синтаксис и вставить его в свой проект.

Надеюсь, это поможет

1 голос
/ 02 апреля 2012

Почему бы просто не установить метку формы равной 24px и высоту ввода формы в зависимости от того, что соответствует? 

form label {
    font-size: 24px;
}

form input, form textarea, form select {
    margin-left: 200px;
}

Просто поместите этот код где-нибудь после загрузки bootstrap.css, и он переопределит их значения по умолчанию.Вы также можете добавить селекторы для типа ввода, чтобы он не работал с кнопками.

...