Руслан

Немного некорректный вопрос. А что учить в Bootstrap, собственно говоря? Если знаете HTML и CSS, то и учить ничего не надо. Bootstrap – обычный фреймворк с готовым набором элементов и еще парой вкусностей. Поэтому, для начала работы с Bootstrap вам необходимо всего лишь иметь базовые знания верстки, а там уже дело практики. Единственное, что вы будете использовать от него, так это классы элементов. Смотрите официальную документацию по использованию и начинаете верстать небольшие макеты с простыми компонентами, а затем уже более сложными, с соответственно, усложненными компонентами и JavaScript.

1. Отключить внешние раздражители - очень важно. Телевизор и подобное лучше вообще убрать подальше.
2. Научиться правильно отдыхать, в том числе - чтобы голова отдыхала. Закончили работу - переключайтесь на то, что происходит вокруг, общайтесь, забудьте вообще о работе. Можете 10 минут удерживать "пустоту" в голове, не думать ни о чем? Чтобы ни одна мысль не пролезла в голову? Дайте мозгу "проголодаться", сразу станет интереснее.
3. Ваша проблема - не только Ваша, с ней сталкиваются практически все так или иначе. Приходится учиться, находить свой ритм работы и отдыха. Допустим, отдыхаете каждые полчаса. Каждый раз, завершив какую-то подзадачу, ставите отметку "выполнено". В связи с этим - полезная техника: составляйте план из микрозадач и, по мере их выполнения, ставьте галочки напротив каждой выполненной задачи. Мелочь, а хорошо помогает в плане концентрации.
4. Одной из причин может быть то, что Вы ставите перед собой сразу много обязанностей, мозг воспринимает это как неподъемную задачу и блокирует ее выполнение. Разбивайте задачу на более мелкие и не обещайте себе выполнить непременно все. Отдыхайте, переключайтесь, развлекайтесь.
5. Не держите все в голове - записывайте. Разгружайте голову. Когда занимаетесь - ведите подробные конспекты. Это помогает структурировать информацию. На экзамене очень выручает - Вы вспоминаете не информацию из учебника, а то, что сами записали в конспект, как будто это Ваше творение. Вам остается только воссоздать свой конспект на листочке, что обычно происходит легко, как будто само собой.
6. Лучший отдых - это перемена занятий. Найдите противоположный вид деятельности, например, спорт, и работайте с реальной отдачей, до изнеможения. Уровень концентрации в вашей основной области повысится в разы.
Пробуйте, ищите, учитесь. Есть целое направление - brain fitness, посмотрите, может, найдете что-то полезное и для себя.

Мне в таких случаях помогает этот сайт, так как на нём быстрее чем в ручную.

Распределить работу покомпонентно.
Любые макеты можно разобрать на следующие компоненты и этапы.

0. Создается общий репозиторий для проекта.
Все работы ведутся сразу в нем. Чем чаще делаются коммиты, тем раньше вылезут и будут исправлены проблемы. У каждого компонента есть свой css/less/sass файл, чтобы легче управлять кодом и избегать merge-конфликтов.

1. Основные строительные блоки:
- Типографика и стили для контента (таблицы, цитаты)
- Элементы форм + стили валидации
- Декоративная графика (иконки, плашки)
- Модульная сетка (сразу респонсив)

Каждый верстальщик отвечает за свой кусок работы и создает демо-страничку с перечнем компонентов, которые он сверстал. Работа верстальщиков не пересекается.

2. Повторяющиеся компоненты:
- Навигация
- Ленты новостей, событий, блогпостов, результатов поиска, чего угодно
- Типовые формы (логин, регистрация, поиск)
- Табы
- Слайдеры
- и так далее

Каждый верстальщик делает свою категорию элементов и создает демо-страничку с перечнем компонентов и всеми их модификациями. Работа верстальщиков почти не пересекается, но каждый компонент основан на стилях, написанных на первом этапе.

После этих двух этапов у команды готов UI-kit проекта.

3. Предварительная сборка всех шаблонов страниц с реальным контентом

Работа распределяется постранично. Каждый верстальщик копипастит блоки из UI-кита и наполняет реальным контентом. В конце команда оценивает, где что еще нужно доделать.

4. Редкие кастомные компоненты и модификации

На основе проблем, которые вылезли на третьем этапе, каждый верстальщик допиливает блоки, за которые он отвечает.

В общем, верстать надо от простого к сложному, от общего к специфичному и при этом независимыми блоками. Тогда несколько верстальщиков спокойно могут уживаться на одном проекте, не мешать друг другу и не ломать друг другу код.

Обо всем этом говорят Atomic Design, ITCSS и многие другие методологии.

Первый путь.
На Гитхабе поискать по ключевым словам (BEM, SMACSS, OOPCSS) — найдутся бойлерплейты и стартеркиты, которые по определению должны быть хорошего качества.

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

Второй путь.
Искать в Гугле людей, которые пишут про BEM, SMACSS, OOPCSS и прочих крутых фронтендеров. Искать их профили на гитхабе, изучать их проекты. Если они пишут про методологии, то они явно их используют в работе.

Блок, внутри которого спозиционирован маленький блок с текстом и псевдоэлемент c видимой границей.
https://jsfiddle.net/otmngfe5/