google search bar twitter-bootstrap

Я ищу для создания простой индексной страницы с помощью панели поиска по центру в стиле Google, однако я изо всех сил стараюсь добиться хороших результатов с помощью Twitter Bootstrap.google search bar twitter-bootstrap

В строке поиска должна быть указана кнопка поиска, расположенная в конце (в правой части) поля поиска. Я использовал typeahead, поскольку планирую код для системы поиска по раскрывающимся спискам.

<div class="hero-unit"> 
<div class="input-append"> 
    <input type="text" data-provider="typeahead" class="input-large" 
    placeholder="What do you want to know?" autocomplete="off"> 
    <button type="submit" class="btn-large btn-success"> 
    <i class="icon-search"></i> 
    </button> 
</div>

Он также должен быть больше (выше), чем стандартное текстовое поле, функция не доступна в стабильной версии Twitter Bootstrap, следовательно, CSS я должен был поместить в верхней части стр.

<style> 
input[class=input-large] { 
    width: 540px; 
    height: 24px; 
    margin-bottom: 10px; 
    margin-right: -7px; 
    line-height: 30px; 
    padding: 11px 19px; 
    font-size: 17.5px; 
    -webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
      border-radius: 6px; 
    }

Единственный способ, которым я мог видеть, о получении кнопки поиска ближе к SearchBar (пробел появляется при использовании БТН-большой), чтобы использовать отрицательный запас. Не то, чем я горжусь, это выглядит очень грязно.

Буду признателен за руководство. Заранее спасибо.

источник

2013-03-20 Lemon

попробуйте использовать 'input-append' и' add-on'; они буквально заставляют кнопку и бар сливаться в один – Amelia

<div class='container'> 
    <div class='row'> 
     <form> 
     <div class='span3 input-append' style="margin-top:30%; margin-left:30%"> 
      <input class="span2" style="height:26px;width:400px;" id="main_search" type="text" > 
      <input class="btn btn-large btn-primary" type="button" value="search"> 
     </div> 

     </form> 
    </div> 
</div>

Fiddle-

Updated fiddle

источник

2013-03-20 15:49:51 Manoj

Не используйте '/>' в HTML5 для самозакрывающихся элементов; он недействителен и создает элемент void. он также недействителен в HTML4 :) – Amelia

@Hiroto, rozar, что! – Manoj

вы можете просто использовать '' like the bootstrap docs do – Amelia

Вы можете попробовать extended form controls

<div class="input-append"> 
    <span class="add-on"><input id="search-button" value="Search"></span> 
    <!-- stick a search icon in there instead --> 
    <input class="span2" id="search"> 
</div>

Вы должны настроить CSS кнопки, если вы делаете это (отступы, контуры), хотя , но они останутся как единое целое в мобильном режиме. Если вам действительно нужен пользовательский вид, вы бы все равно опустили поля.

источник

2013-03-20 15:50:48 Amelia

Опять же, это не помогает в основной проблеме - btn-large и больше/выше текстовых полей. Я, должно быть, пропустил расширенный бит управления в документах, поэтому, спасибо за ссылку. – Lemon

google search bar twitter-bootstrap

ответ

Смежные вопросы