Уменьшить высоту поля ввода Bootstrap Twitter?

Ответ 1

Я не смог найти ни одного, и если нет, то как я могу переопределить значения по умолчанию?

Высота поля ввода Bootstrap определяется с помощью селекторов атрибутов, например. input[type="text"], input[type="password"]

Вы можете переопределить его со своими стилями в том же формате селектора или использовать классы и т.д.

.mystyle input[type="text"] {
   height: 14px;
   font-size: 10px;
   line-height: 14px;
}

Ответ 2

Согласно документу Bootstrap: Bootstrap CSS, вы должны использовать .input-sm

Если вы собираетесь писать свой собственный CSS, вы на самом деле не используете возможности Bootstrap.

<input class="form-control input-sm" type="text" placeholder=".input-sm">

Он просто изменяет свойство height, как указано @Neps

Но мне пришлось переопределить .input-sm в моем собственном CSS, чтобы получить правильное определение размера.

Я просто предпочитаю использовать классы Bootstrap, где это возможно.

Ответ 3

Да, существуют классы для управления высотой. Вы можете прочитать о них здесь.

input-lg
input-sm

Ответ 4

Я бы посоветовал научиться использовать компилятор LESS или SASS для ваших загрузочных файлов и загрузить файлы LESS/SASS вместе с Bootstrap. Это не очень сложно и на самом деле так, как вы "должны" настраивать Bootstrap. Это может быть немного тяжело для одной или двух настроек, но для таких вещей, как общая цветовая схема или интервал управления сеткой/вводом и добавление, это намного лучше, поскольку переменные LESS являются универсальными и могут применяться к вещам, которые вы бы не использовали, t думаю, чтобы переопределить. Например, вы должны украшать все свои входы классом "form-control". Классы "form-control" и "output" определены в файле: forms.less, а высота поля основана на многих переменных:

.form-control {
  display: block;
  width: 100%;
  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: @padding-base-vertical @padding-base-horizontal;
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @input-color;
  background-color: @input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid @input-border;
  border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));

  ...more stuff I removed...
  }

Все переменные определены в одном, легком для работы с файлом, и изменения, которые там влияют на все. Здесь образец:

//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

@padding-base-vertical:     6px;
@padding-base-horizontal:   12px;

@padding-large-vertical:    10px;
@padding-large-horizontal:  16px;

@padding-small-vertical:    5px;
@padding-small-horizontal:  10px;

@padding-xs-vertical:       1px;
@padding-xs-horizontal:     5px;

@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small:         1.5;

@border-radius-base:        4px;
@border-radius-large:       6px;
@border-radius-small:       3px;

//** Global color for active items (e.g., navs or dropdowns).
@component-active-color:    #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg:       @brand-primary;

//** Width of the `border` for generating carets that indicate dropdowns.
@caret-width-base:          4px;
//** Carets increase slightly in size for larger components.
@caret-width-large:         5px;

Если выйдет новая версия BS, вы просто применяете свои старые переменные к новым файлам BS с помощью компилятора.

Ссылки: http://getbootstrap.com/customize/

http://lesscss.org/

Пользователи Visual Studio: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler