Bootstrap css 3: Bootstrap · The world’s most popular mobile-first and responsive front-end framework.

Leave a Comment / Css / By /

Краткий обзор Bootstrap 3 – Zencoder

Еще один фреймворк из бесчисленного на сегодняшний день полка фреймворков — Bootstrap 3. Точнее было бы сказать, что не еще один — а флагман CSS-фреймворков! Версия 2 вышла давно и на сегодня является устаревшей. Сегодня самая современная версия — это версия 3. Поэтому ее мы и будем рассматривать. Вопрос данной статьи будет посвящен основе данной фреймворка — CSS-сетке и особенностям ее создания в версии 3.

Установка и настройка Bootstrap 3

Ничего сложного и необычного в установке фреймворка Bootstrap 3 нет. Для этого скачиваем дистрибутив с официального сайта Bootstrap 3, распаковываем архив в готовый проект-директорию.

Затем с официального сайта берем готовый шаблон HTML-документа — Basic template и создаем свой собственный индексный файл HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.
 
 min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h2>Hello, world!</h2>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

В этом файле проверяем правильность путей для CSS и JS-файлов:

<link href="css/bootstrap. css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
...

Все готово для дальнейшей работы.

Система сеток Bootstrap 3

Важнейшей составляюшей любого CSS-фреймворка является система CSS-сетки (grid). Как и в предыдущей версии Bootstrap 2, в версии 3 используется 12-ти колоночная система.

Однако, в Bootstrap 3 применяются четыре типа классов для создания адаптивной (responsive) сетки. На официальном сайте Bootstrap 3 имеется таблица с побробным и наглядным описанием этих классов — Grid Options.

В этой таблице представлены четыре ширины экрана устройства, на котором будет отображена страница. Колонка “Extra small devices” с шириной менее 768px обозначает мобильные устройства. Колонка “Small devices” с шириной равной или больше 768px представляет планшетные компьютеры (планшеты). Две остальные колонки представляют обычный настольный монитор через колонку “Medium devices” с шириной равной или больше 992px и широкоформатный монитор через колонку “Large devices” с шириной равной или больше 1200px.

Вышеназванные величины 768px, 992px и 1200px являются контрольными точками (breakpoints), служащими для обработки медиа-запросов в адаптивном дизайне страницы.

В данной таблице строка “Class prefix” является чуть ли не самой важной, так как в ней содержатся имена (префиксы) классов фреймворка Bootstrap 3 для каждого из четырех типов устройств. Для мобильного устройства имя (префикс) класса будет 

1

.col-xs-
, для планшетного компьютера префикс будет 
1

.col-sm-
, для обычного монитора — 
1

.col-md-
и для широкоформатного монитора — 
1

.col-lg-
. Для видно из названия префиксов, они являются сокращениями от названия самих устройств, поэтому их легко запомнить.

Вот и все, что необходимо знать о системе CSS-сеток в фреймворке Bootstrap 3. Дальше можно легко домыслить ход построения адаптивной сетки для конкретного сайта.

Пример создания CSS-сетки в Bootstrap 3

Допустим, необходимо создать следующий макет:

  • для широкоформатного монитора в макете должно быть 2 столбца — один шириной 10 колонок и второй шириной 2 колонки;
  • для обычного монитора 2 столбца — один шириной 8 колонок и второй шириной 4 колонки;
  • для планшета 2 столбца — один шириной 6 колонок и второй шириной также 6 колонок;
  • для мобильного устройства макет должен остаться, как и для планшета — два столбца одинаковой ширины.

То есть, при изменении ширины монитора устройства ширина столбцов в макете должна меняться, как показано выше. Для этого создадим простую разметку и добавим в нее классы Bootstrap 3:

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

Если открыть созданную страницу в окне браузера и попробовать менять ширину его окна, то в диспечере свойств страницы увидим метаморфозы, связанные с работой медиа-запросов 

1

media-queries
. При ширине окна больше 1200px будем наблюдать левый столбец шириной в 10 колонок и правый столбец шириной в 2 колонки.

Уменьшив ширину окна до 992px, получим левый столбец шириной в 8 колонок и правый стлбец шириной в 4 колонки. Еще уменьшив окно до 768px, получим два одинаковых столбца шириной в 6 колонок. Если окно окончательно уменьшится (менее 768px), ширина столбцов останется прежней, но они расположаться вертикально, друг под другом (поведение по умолчанию).

Видимость элементов сетки в Bootstrap 3

Немного усложним задачу и сделаем ее интереснее ради теоретического примера работы фреймворка Bootstrap 3. Допустим, нам необходим такой макет:

  • широкоформатный монитор — 12 колонок;
  • обычный монитор — 3 колонки;
  • планшетный монитор — 3 колонки;
  • мобильный монитор — 2 колонки.

Тогда HTML-разметка и классы фреймворка Bootstrap 3 следующими:

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

В данном случае при измении ширины окна браузера будет меняться количество колонок внутри макета. При ширине большей 1200px число колонок будет равняться шести. При уменьшении окна до ширины в 992px число колонок изменится до 4-х и будет оставаться таковым при ширине окна 768px. Если окно еще уменьшится ниже 768px, то количество колонок измениться до двух.

Подобные метаморфозы возможны благодаря классу 

1

hidden-x
, который вы могли заметить в разметке. Задача этого класса скрыть указанный элемент при достижении окном браузера определенной контрольной точки. Для каждого из предполагаемых состояний окна браузера необходимо указать класс — 
1

hidden-lg
, 
1

hidden-md
, 
1

hidden-sm
, 
1

hidden-xs
:

Противоположностью класса 

1

hidden-x
является класс 
1

visible-x
.
Несмотря на то, что действие этих классов должно быть прямо противоположным друг другу, на практике это различие уловить не так просто и тут может помочь сравнительная таблица с официального файта Bootstrap 3 — Responsive utilities. В этой таблице (см. таблицу выше) хорошо видно различие между этими классами.

В то время как класс 

1

hidden-x
производит скрытие элемента в определенной контрольной точке (breakpoint), во всех остальных состояниях элемент видимый. Класс 
1

visible-x
делает элемент видимым только в определенном состоянии — во всех остальных состояниях элемент невидимый.

Вложенность (nesting) сетки в Bootstrap 3

CSS-сетка в фреймворке Bootstrap 3 позволяет выполнять вложение одних ячеек в другие. Такое явление называется nesting. К примеру, необходим создать такую HTML-разметку:

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

Для наглядности примера оставим для элементов только один класс 

1

. col-lg-
. Блок с классом 
1

primo
имеет три обычные колонки 
1

col-lg-4
. Блок с классом 
1

secondo
имеет две колонки — 
1

col-lg-8
и 
1

col-lg-4
. Внутри колонки 
1

col-lg-8
размещено еще два блока равной ширины — две колонки с классом 
1

col-lg-6
. Это пример вложенности (nesting) одних ячеек CSS-сетки Bootstrap 3 в другие ячейки.

Аналогичная ситуация с блоком класса 

1

tetro
, но в нем в оба “первичных” блока вложены еще два блока. Всего получается четыре блока. С блоком класса 
1

quattro
все просто — там “обычные” (не вложенные) шесть блоков класса 
1

col-lg-2
.

При этом нужно обратить внимание (если еще не догадались), что при вложении одних блоков в другие ширина блока-родителя принимается по умолчанию равной 12-колонкам.

Смещение (offsetting) колонок в Bootstrap 3

В Bootstrap 3 можно смещать колонки вправо с помощью класса 

1

.col-*-offset-*
, который добавляет 
1

margin-left
для указанной колонки. Смещение производится на ширину колонки, кратную указанному количеству.

Приведу пример, чтобы было наглядно понятно:

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

В этом примере колонка с классом 

1

right
имеет ширину в два столбца и смещается вправо опять таки на два столбца — 
1

col-lg-offset-2
. При этом стоит также заметить, что данное смещение будет выполняться только при ширине экрана больше 1200px (breakpoint), на что указывает имя класса — 
1

col-lg-
. Если необходимо, чтобы такое смещение сохранялось при меньших размерах окна браузера, необходимо явно указать это в коде:

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

Адаптивная (responsive) сетка в Bootstrap 3

Переключать ширину сетки с фиксированной на резиновую в Bootstrap 3 можно точно также, как и во 2-й версии. Для этого нужно заменить для блока-контейнера имя класса с 

1

container
на 
1

container-fluid
:

<div>
  <div>
    ...
  </div>
</div>

Заключение

На этом обзор CSS-сетки в фреймворке Bootstrap 3 можно считать законченным. Субъективно для меня был интересен именно этот вопрос. Что касается рассмотрения остальных классов, предназначенных для оформления различных элементов на странице, то мне они кажутся не такими интересныи и важными.

Может быть, в дальнейшем я и вернусь к расмотрению деталей фреймворка Bootstrap 3.

bootstrapcss

Html css верстка bootstrap 3 • фриланс-робота для спеціаліста • категорія HTML та CSS верстання ≡ Замовник Artem Naumov

дата онлайн рейтинг вартість час виконання


  1. 5 днів5000 UAH

    5 днів5000 UAH

    слово ВЕРСТКА
    Здравствуйте! Имею большой опыт адаптивной верстки сайтов.
    Буду рад качественно и в срок выполнить Ваш проект.

  2. 20 днів5000 UAH

    20 днів5000 UAH

    Верстка
    Оценить проект можно только при наличии детального ТЗ, если вы его предоставите, то я проанализирую и объявлю вам примерные цифры. Глядя на скриншот начальной страницы невозможно добиться какой-либо конкретики.

  3. ставка прихована фрилансером

  4. 6 днів3000 UAH

    6 днів3000 UAH

    ВЕРСТКА
    Здравствуйте, Артем.
    Сверстаю качественно, кроссбраузерно (все современные браузеры и IE10+), адаптивно.
    Хотелось бы ознакомиться с деталями и макетами внутренних страничек.
    Приступить могу сегодня. Показываю промежуточные результаты. Оплата по завершению.

    Настроена на плодотворное сотрудничество)
    С уважением, Ирина.

  5. ставка прихована фрилансером

  6. 3 дні2500 UAH

    3 дні2500 UAH

    ВЕРСТКА . Готов выполнить ваш проект качественно и оговоренные сроки.

  7. 6 днів3000 UAH

    6 днів3000 UAH

    ВЕРСТКА
    Здравствуйте!
    Готов выполнить верстку. Имею опыт в верстке с помощью Bootstrap.
    Будет сделано адаптивно(под все устройства) и кроссбраузерно.
    Работаю с gulp + scss. Во время работы всегда на связи.
    Примеры работ в профиле.
    Обращайтесь.

  8. 5 днів3000 UAH

    5 днів3000 UAH

    ВЕРСТКА
    Здраствуйте а можете написать в личные более подробно тз и сроки для работы и можем уточнить цену.

    Использую компонентный подход в вёрстке, что ускорит добавление нового контента или целых страниц на сайт.
    В работе использую HTML, CSS(Sass), jQuery, JS, Bootstrap.
    Адаптация сайта под все устройства, включая разрешение 320px.
    Адаптация возможно при помощи бутстрапа или медиа запросов(для большей гибкости на разных разрешениях).
    Код чистый, понятный, без лишний комментариев,кроссбраузерный , валидный.
    Обращайтесь,буду рад помочь,на freelancehunt недавно зарегистрировался, работаю качественно и на положительные отзывы.

  9. 3759

     52  1


    5 днів5000 UAH

    Maksym Telnyi

    5 днів5000 UAH

    ВЕРСТКА
    Добрый день!
    Заинтересовал ваш проект, готов обсудить детали и приступить к работе уже сегодня.

    Мои работы есть в портфолио тут
    Freelancehunt

    Мой номер телефона 0973632041
    Жду вашего ответа..

    На данный момент являюсь действующим Full Stack WordPress разработчиком в Шведской компании. Качество работ и подход к проектам соответствующий. Обращайтесь в личные сообщения.

  10. 10 днів3000 UAH

    10 днів3000 UAH

    ВЕРСТКА
    Добрый день, готов выполнить заказ, за 3000, срок составит 10 дней, обращайтесь в личные сообщения.

  11. 3 дні2500 UAH

    3 дні2500 UAH

    ВЕРСТКА
    Здравствуйте, Артем.
    Буду рад с вами сотрудничать. Указал сумму и сроки за все, если у всех 6-ти лендингов только картинка в шапке разная. Могу реализовать все, кроме интерактивного графика внизу (перед FAQ), поэтому вопрос — это картинка или все же интерактивный график? В общем, напишите в ЛС — обсудим.

  12. 2 дні2000 UAH

    2 дні2000 UAH

    ВЕРСТКА
    Здравствуйте!
    Выполню Ваш заказ максимально быстро красиво и качественно)!!!
    Мой опыт работы в сфере веб — разработки и веб — дизайна составляет уже более 2 лет.
    Портфолио в профиле!
    Контакты:
    Mail: [email protected]
    SKYPE: andrey.savchuk24
    Обращайтесь) !

  13. 5 днів1800 UAH

    5 днів1800 UAH

    ВЕРСТКА
    Здраствуйте. Готов сверстать c использованием Bootstrap . Пишите.

  14. ставка прихована фрилансером

  15. 7 днів5000 UAH

    7 днів5000 UAH

    ВЕРСТКА
    Здравствуйте, Артем.
    Сверстаю качественно, кроссбраузерно (все современные браузеры и IE10+), адаптивно.
    Хотелось бы ознакомиться с деталями и макетами внутренних страничек.
    Приступить могу сегодня. Показываю промежуточные результаты. Оплата по завершению.

    Настроена на плодотворное сотрудничество)

  16. 5 днів4500 UAH

    5 днів4500 UAH

    ВЕРСТКА
    Добрый день, сверстаю Ваш проект на bootstap 3 + scss(sass), или на Ваше усмотрение
    Сроки и цена, после ознакомления фронта работ

  17. 5 днів5000 UAH

    5 днів5000 UAH

    ВЕРСТКА будет адаптивной и кросбраузерной, валидной, интересуют остальные макеты и детали

  18. ставка прихована фрилансером

  19. 10 днів5000 UAH

    10 днів5000 UAH

    ВЕРСТКА
    Готов взяться за выполнение работы.
    Для точного оглашение сроков работы хотелось бы увидеть ТЗ. На все вопросы отвечаю быстро без задержек. Код чистый, аккуратный, и валидный. Буду рад с вами работать. Жду вашего ответа.

  20. 4 дні2000 UAH

    4 дні2000 UAH

    ВЕРСТКА
    здравствуйте
    есть вопросы по функционалу не могли бы вы написать в личку или выслать тз

  21. 5 днів4000 UAH

    5 днів4000 UAH

    ВЕРСТКА.
    Добрый вечер, буду рад выполнить вашу верстку. Качественно и в срок.

  22. 4 дні6500 UAH

    4 дні6500 UAH

    ВЕРСТКА
    Здравствуйте!
    Верстаю около 5-ти лет.
    Для более корректной цены и сроков нужны остальные макеты.
    Пишите)

  23. 6 днів5000 UAH

    6 днів5000 UAH

    ВЕРСТКА !!!
    Готов выполнить проект. Примеры моей вёрстки:
    https://chromies.github.io/naturello
    https://chromies.github.io/freshness
    Остальные работы в портфолио.

  24. 9684

     72  0


    3 дні3000 UAH

    Артем Осядлий

    3 дні3000 UAH

    ВЕРСТКА
    Опыт работы в сфере Frent-end более 4‑х лет, описывать все технологии что знаю нет смысла они есть в профиле. Если Вам действительно важно что бы продукт приносил деньги, посмотрите мой сайт: http://riffux.com/ и портфолио: Behance
    примеры верстки могу скинуть в личку.
    Взвести все за и против и обращайтесь в любое время.

    Про ціну завжди можна домовитись.

  25. 5 днів4500 UAH

    5 днів4500 UAH

    ВЕРСТКА
    Добрый день!
    Готовы заняться версткой сайта. Отправьте, пожалуйста, все макеты страниц в лс.
    Ознакомиться с нашими работами можете на сайте https://icreative.com.ua
    Наш Skype: icreative-ua
    Email: [email protected]
    Обращайтесь.

  26. 5 днів4000 UAH

    5 днів4000 UAH

    ВЁРСТКА
    Здравствуйте, Артём!
    Занимаюсь адаптивной вёрсткой более 4-х лет!
    Давайте обсудим детали выполнения и приступим к работе!
    Портфолио http://landingandrey. 16mb.com/

  27. 3 дні300 RUB

    3 дні300 RUB

    ВЕРСТКА
    Здравствуйте, Артём!
    Я понимаю, что у меня очень мало шансов выиграть эту ставку, поскольку я только начинающий веб-разработчик. Я хочу вам предложить вёрстку макета на отзыв, абсолютно бесплатно, срок выполнения я не могу сказать, но где-то 3 дня.
    Макет сверстаю на Boostrap 3, со знаниями HTML И CSS. Качество не гарантирую, но постараюсь написать чистый код ( Код буду проверять на валидность ).
    Если вам понравилось моё предложение, то я готов взяться за работу!

    С уважением, Артак.

  28. 1 день1000 UAH

    1 день1000 UAH

    ВЕРСТКА
    Здравствуйте!
    Буду рад присоединится к проекту!

    Цена за первую страницу, остальные строки после ознакомления обсуждаются в ЛС!

    Навыки верстки: HTML5 / CSS3(SASS) / jQuery
    Адаптивная верстка: Bootstrap, Flexbox, media query, адаптивная верстка E-mail

    … Портфолио в профиле)

    e-mail: [email protected]
    viber: +380501777283
    skype: Анатолій Ігнатьо ([email protected])

    С Уважением, Анатолий!

  29. 3 дні1000 UAH

    3 дні1000 UAH

    ВЕРСТКА
    Поскольку структура всех страниц одинаковая то вёрстка займёт 2-3 дня, сделаю за 1000 грн

  30. 75″ data-days=»5″ data-lastactivity=»1640438621″>

    5 днів5000 RUB

    5 днів5000 RUB

    Здравствуйте.Смогу сверстать ваш сайт.
    Использую HTML 5, CSS 3, js,jQuery,bootstrap.
    Верстаю адаптивно и кроссбраузерно.
    В веб-разработке уже нахожусь около 2-х лет.

  31. ставка прихована фрилансером

  32. 5 днів3000 RUB

    5 днів3000 RUB

    Верстка
    Думаю это не составит труда. Если cогласны или будут вопросы пишите [email protected]

  33. 7 днів1000 UAH

    7 днів1000 UAH

    ВЕРСТКА. Добрый день , готов взяться за ваше задание. Использую технологии : Bootstrap3,JavaScript,Jquery и чистая верстка на HTML и CSS . Так же могу предложить сделать адаптив или резину сайта. Хотел бы обсудить подробности с вами лично .
    Skype: art.knyazhev
    Gmail: [email protected]

  34.  фрилансер більше не працює на сервісі

  35. 7 днів4000 RUB

    7 днів4000 RUB

    Могу сверстать требуемый сайт по вашему шаблону. За работу беру мало денег, так как нужно портфолио. При этом опыт работы имеется. В работе использую HTML5, CSS3 и фреймворк Bootstrap 4. С радостью готов помочь! Готов сделать по цене ниже, чем в бюджете!

  1. 3″ data-days=»4″ data-lastactivity=»1518374712″>

     фрилансер більше не працює на сервісі

  2. 10636

     243  5


    4 дні3000 UAH

    Василь Б.

    4 дні3000 UAH

    ВЕРСТКА

    Готов сверстать ваш проект обращайтесь, сделаю качественно с полной адаптацией под моб. устройства

  3. 6 днів4000 UAH

    6 днів4000 UAH

    ВЕРСТКА
    Здравствуйте!
    Готов выполнить Ваш проект.
    Онлайн 24/7. Обращайтесь.
    skype — Krd2021
    Жду ответа,как соловей лета.

  4. 5 днів4000 UAH

    5 днів4000 UAH

    Добрый день. Верстаю адаптивно и кроссбраузерно, использую Bootstrap. Ниже можно посмотреть мои работы, все на Bootstrap.

    Последние работы:
    http://dev8.olmor.com.ua/
    http://dev9.olmor.com.ua/
    https://www.reapps.com.au/
    http://dev5.olmor.com.ua
    http://modernchef.pro
    http://gazalle.ae/
    …
    Мой сайт-портфолио:
    http://olmor.com.ua/

    Контакты:
    Skype: oleg_mor92
    Email: [email protected]

  5.  фрилансер більше не працює на сервісі

  6.  фрилансер більше не працює на сервісі

  7. 5 днів3400 UAH

    5 днів3400 UAH

    Здравствуйте, сделаем вашу работу максимально качественно и в срок. Пишите
    Наш сайт: pollman.com.ua

  8. 5 днів5000 UAH

    5 днів5000 UAH

    Доброго Дня! Готов выполнить.
    Более 6 лет опыта во Front-end разработке, создание различных сайтов, Landing Page, CMS, в приоритете WordPress.
    Всегда на связи в Skype — Kurz806
    +38-099-600-2486 (Viber)
    https://www.facebook.com/maystrenko.kirill
    Freelancehunt

  9. 10 днів3000 UAH

    10 днів3000 UAH

    Здравствуйте! Готов выполнить качественную ВЕРСТКУ ваших страниц.
    Примеры работ есть в моем портфолио: Freelancehunt.
    Подробнее обсудим в ЛС.

  10. 4 дні3000 UAH

    4 дні3000 UAH

    Готов реализовать ваш проект.
    IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

  11. 8 днів8000 RUB

    8 днів8000 RUB

    Артем, здравствуй.

    Работаю фреймворкам Bootstrap 3/4, Bootstrap Material.
    пример работы (вставить в адресную строку):

    https://goldmansashaddesignstudio.github.io/

    https://goldmansashatattoo.github.io/

  12.  фрилансер більше не працює на сервісі

  13. ставка прихована фрилансером

  14. ставка прихована фрилансером

  15. 7 днів3000 UAH

    7 днів3000 UAH

    Здравствуйте!
    ВЕРСТКА.
    Предлагаю обсудить цены, сроки и детали выполнения работы!
    Портфолио: Freelancehunt
    skype: semenov alexander (Мариуполь, Украина)

  16. ставка прихована фрилансером

  17.  фрилансер більше не працює на сервісі

  18. 7 днів4000 UAH

    7 днів4000 UAH

    ВЕРСТКА

    Доброе. Сделаю качественно и без ошибок, портфолио и резюме есть в профиле на фрилансе, можете ознакомиться, если интересно.

  19. 7 днів7000 RUB

    7 днів7000 RUB

    ВЕРСТКА, макет посмотрел,
    готов приступить к работе сегодня же
    моё портфолио http://gkhabada. h2n.ru/

  20. 5 днів2500 UAH

    5 днів2500 UAH

    Добрый день, Артём!

    Вёрстка
    С удовольствием возьмусь за ваш проект. Сверстаю в лучшем виде. Буду рад взаимному сотрудничеству. Пишите!

    Контактная информация:
    Skype: ya_blogo
    Email: [email protected]

  21. 2 дні1400 UAH

    2 дні1400 UAH

    ВЕРСТКА
    Добрый день.
    Заинтересовал ваш проект, готов его реализовать.
    Стоимость верстки главной 1400грн, сроки — 2дня.
    Примеры работ:
    — amaxinteractive.com
    — 1xbetua.com/fortuneapple
    — nikon100years.com.ua
    — kaminskiy-design.com.ua

  22. 44″ data-days=»5″ data-lastactivity=»1614000359″>

    5 днів4800 RUB

    5 днів4800 RUB

    ВЕРСТКА
    Артем, здравствуйте! Ознакомился с дизайном — сверстаю за 800р/страница на bootstrap3 (адаптив). По срокам — не более 5 дней. Обращайтесь, буду рад сотрудничеству!

  23. ставка прихована фрилансером

  1. ставка відкликана

css — адаптивный макет Bootstrap 3 для настольных и мобильных устройств

спросил

Изменено 8 лет, 5 месяцев назад

Просмотрено 29 тысяч раз

Используя bootstrap 3 для разработки моего адаптивного веб-сайта, у меня возникли проблемы с тем, чтобы макет работал ниже разрешения по ширине рабочего стола 1366 пикселей против 786 пикселей. Когда макет уменьшается до 1024 пикселей, он считается точкой останова для мобильных устройств.

Как я могу контролировать, когда макет переключается с рабочего стола на мобильный?

это мой html

 
<дел>
    <дел>
        <дел>
<дел> <дел> <дел>