iBird Rose

вчера только отвечал Как настроить меню бутстрапа?
p.s. тебе достаочно будет заменить @screen-sm-min на @screen-md-min

было уже на тостере. ищи лучше. примерно так jsfiddle.net/juesxt6v/5

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

var count = 0;

save_button.addEventListener('click', function (e) {

    e.preventDefault();

    ++count;

    console.log(count);
})

localStorage.setItem("note_count", count);

и еще условие внутри функции клика нужно сделать. чтобы count брал из локального хранилища, а не обнуленный, когда тебе нужно будет

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

4 квадратика с position: absolute; по бокам у которых border-top, border-left или border-top, border-right или border-bottom, border-left или border-bottom, border-right соответсвенно

если хочешь чтобы было красиво - делай отдельно иконками. что то типа такого

<ul class="character">
				<li><i class="icon-1"></i> Производитель: Focus</li>
				<li><i class="icon-2"></i>Пол: Унисекс</li>
				<li><i class="icon-3"></i>Тип велосипеда: Горный MTB</li>
</ul>

ну здесь p вообще никаким боком. потому что li - такой же. значит p здесь не нужен

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

оборачиваешь изображение в див типа .img-wrap и ему задаешь

:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 2;
}

а самому

.img-wrap {
  position: relative;
  z-index: 1;
}

если по простому - это сделано для того, чтобы когда ты таким образом подключишь css - и при изменении эти цифры будешь менять - то при обновлении браузера css подключиться новый(измененный), потому что браузер будет думать что это новый ксс файл.
а если такого не делать - пользователю нужно будет сначала очистить кеш, чтобы увидеть обновления в ксс
еще такое популярно делать когда меняются спрайты с иконками. к примеру если раньше стоял background: url('img/sprite.png'); и сделали новые иконки и написать background: url('img/sprite.png?123'); то новый спрайт подхватится сразу без обновления кеша

самому ток задавать. и при этом не трогай классы бутсрапа. оберни row к примеру во что нибудь и им задай.

<div class="container">
  <div class="lines">
  <div class="row">
    <div class="col-xs-3">3 колонки</div>
    <div class="col-xs-5 col-xs-offset-1">5 колонок</div>
    <div class="col-xs-2 col-xs-offset-1">2 колонки</div>
  </div>
  </div>
  <div class="lines">
  <div class="row">
    <div class="col-xs-3">3 колонки</div>
    <div class="col-xs-5 col-xs-offset-1">5 колонок</div>
    <div class="col-xs-2 col-xs-offset-1">2 колонки</div>
  </div>
</div>
</div>

.lines {margin-bottom: 30px;}