Ответ 1

Скрытие элементов

Скрыть элементы можно с помощью:

display: none;
visibility: hidden;

Надеюсь, вы используете LESS или SASS, чтобы вы могли просто указать:

@mixin hidden {
  display: none;
  visibility: hidden;
}

А затем легко перемешать в случае необходимости:

footer {
  @include hidden;
}

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

Замена изображений

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

Но конкретное решение, которое мне нравится, из этого сообщения в блоге: http://unstoppablerobotninja.com/entry/fluid-images/

/* You could instead use ".flexible" and give class="flexible" only to 
   images you want to have this property */
img { 
  max-width: 100%;
}

Теперь изображения будут отображаться только в полном объеме, если они не превышают их родительский контейнер, но они будут сжиматься, поскольку их родительский элемент (например, <div>, в котором они находятся) сжимается.

Вот демо: http://unstoppablerobotninja.com/demos/resize/

Чтобы фактически заменить изображения, вы можете поменять фоновое изображение на CSS. Если .logo имеет background: url("logo.png");, вы можете просто указать новое фоновое изображение в медиа-запросе с помощью .logo { background: url("small-logo.png");

Изменить h2 на h5

Если это связано с тем, что вы хотите изменить размер заголовка, не делайте этого. H2 имеет семантическое значение: оно не так важно, как H1 и более важно, чем H3.

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

@media (max-width: 480px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 80%;
  }
}

Ответ 2

В течение последних нескольких дней я играл с чувствительными частями бутстрапа, взгляните на /less/responsive.less, чтобы получить представление о том, как вы можете использовать отзывчивые функции бутстрапа.

В основном вы смотрите на ширину/высоту браузера, чтобы определить, какие свойства css применяются к странице. Так, например, если вы хотите изменить h2, когда пользователь использует меньшее устройство, вы бы сделали что-то вроде этого:

@media (max-width: 480px) {
    h2 { font-size: 15px; }
}

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

Вы можете заменить некоторые элементы, используя методы замены css, а затем просто разные стили влияют на вещи различной ширины. Или вы можете использовать jquery или, возможно, response.js, чтобы сделать это. Я все еще играю с этой частью.

Ответ 3

Для чувствительных изображений у вас может быть

.responsive-image { max-width:100%; height:auto; }

и вы можете использовать это как

<img src="testimage.jpg" border="0" alt="blank image" class="responsive-image">

Для гибкой навигации

Использовать tinynav https://github.com/viljamis/TinyNav.js

Это преобразует навигацию <ul> и <ol> в поле выбора для небольших экранов.

Ответ 4

Что касается вашего первого вопроса - я не уверен, что это было доступно, когда вы спрашивали, но у Bootstrap есть классы "скрытый телефон", "видимый рабочий стол" и т.д., чтобы обрабатывать скрытие элементов на экранах разного размера. Просто добавьте класс .hidden-phone к элементу, и он исчезнет на экранах размером меньше 768 пикселей.

ИЗМЕНИТЬ

После выпуска бутстрапа 3 документация 2.3.2 теперь находится по адресу:

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

Новая документация 3.x:

http://getbootstrap.com/css/#responsive-utilities

Ответ 5

Я думаю, что bootstrap имеет встроенные функции для этого (в responsive-utilities.less):

<a href="#">
  <span class="visible-desktop">Click here to get more information</span>
  <span class="visible-tablet">More information</span>
  <span class="visible-phone">Info</span>
</a>