0

В качестве изучения адаптивной вёрстки на bootstrap, хочу реализовать поведение блоков как на сайте http://aplle.com в шапке навигации. В принципе могу реализовать на костылях, сам, эксперментируя с media запросами в собственной таблице стилей. Но всё же интересует как это осуществить красиво, с помощью классов navbar.

полный экран

мобильная версия

А теперь вопросы.

  1. Если все пункты в полном экране, реализовать в качестве списка, то при создании кнопки меню, будет прятаться весь список. Как сделать так что бы прятались все элементы кроме крайнего левого и правого?
    1. Как переместить кнопку меню, влево, яблоко в центр, и bag вправо. Только ручками, или тоже есть на это какие то уже готовые бутстраповские классы? Ручками как это делать знаю. Интересует именно реализация, с помощью bootstrap.

Мой код:

<header class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>   
            </div>
            <div class="collapse navbar-collapse" id="responsive-menu">
                <ul class="nav navbar-nav" >
                    <li><a href="#">Apple</a></li>
                    <li><a href="#">Mac</a></li>
                    <li><a href="#">Ipad</a></li>
                    <li><a href="#">Iphone</a></li>
                    <li><a href="#">Watch</a></li>
                    <li><a href="#">TV</a></li>
                    <li><a href="#">Music</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Search</a></li>
                    <li><a href="#">Bag</a></li>
                </ul>
            </div>
        </div>
    </header>

Как можно будет увидеть все элементы прячутся, под кнопку и кнопка по умолчанию прижимается к правому краю.

2 ответа 2

1

можно сделать следующее.

  1. Первому и последнему элементам списка задать класс hidden-xs, что-бы они прятались при маленьком размере экрана.
  2. Добавить перед кнопкой две ссылки apple и bag с классами visible-xs, что бы они отображались только при маленьком размере экрана
  3. для перемещения кнопки к левому краю экрана прописываем ей класс pull-left
  4. для перемещения кнопки bag к правому краю, прописываем ей класс pull-right
  5. яблоко непосредственно можно отцентрировать только в кастомном css

Спасибо англоязычному stack-overflow

http://output.jsbin.com/hijuzet Пример.

0

У bootstrap красивых решений ваших вопросов нет. Вам придется ручками и костылями делать. Самое правильное решение это -красивые костыли :)

2
  • Очень информативно... 2 мая 2016 в 4:01
  • @UrmuzTagizade Вопрос был задан как это реализовать именно с помощью bootstrap. Ответ дан что ни как. Я лично таких возможностей в bootstrap не нашел. Если Вы знаете как это сделать без костылей то ваш ответ будет более информативным ;) 2 мая 2016 в 13:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.