Jump to content
  • 0

Нубские вопросы про бутстрап


Zverushka
 Share

Question

До сих пор плохо представляю, что это. Хочу задать нубский вопрос.

Бутрстрап имеет часть встроенных стилей.

Например, высота линии боди 1.4. В моем макете высота линии 1.2.

Мне нужно поменять высоту на мою собственную. правильно?

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

Чем 3.0 отличается от 2й версии? Я так посмотрела изменили куча классов, и как я поняла, теперь нет поддержки неадаптивной верстки? То есть раньше было два вида контейнеров - адаптивный и обычный, теперь только адаптивный и если мы хотим это убрать - мы лезем в дебри из разряда "

  • Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
  • Remove the max-width on the .container for all grid tiers with max-width: none !important; and set a regular width likewidth: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

В http://getbootstrap.com/customize/ убрать галочку Responsive utilities и проблема решится?

Третий да, стал более "адаптивный", т.е. основной уклон там именно на мобильники. Об этом уже многое на хабре писали.

Я всегда стили меняю в своих классах, дабы в будущем можно было легко обновить версию бутстрапа, и вообще его можно подключать через cdn

Edited by npofopr
Link to comment
Share on other sites

  • 0

Можно где-нибудь найти полную документацию по каждому классу - свойству? Вот, например. я рассматриваю пример и мне непонятно


<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-brand" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navigation 1</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button class="navbar-brand navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse"><span>Navigation</span></button>
</div>

navbar-brand - что делает? для чего нужно (интересует именно в документации объяснение, чтобы в дальнейшем не задавать вопросов)?

.sr-only - вроде аннотации написано, что нужно только для лейблов для скринридеров. Но ведь здесь применяется не к лейблу? Непонятно мне, зачем тогда тут?

Link to comment
Share on other sites

  • 0

И совсем непонятно про 4 вида сетки, com-md-* понятно, но что делают остальные? Они предназначены для адаптации под большие и маленькие экраны, но как это проявляется?

Еще вопрос. Согласно дизайну, чем меньше экран, тем меньше шрифт в одной из колонок - мне чтобы это реализовать нужно дописать свои медиа запросы?

Edited by Zverushka
Link to comment
Share on other sites

  • 0
Можно где-нибудь найти полную документацию по каждому классу - свойству? Вот, например. я рассматриваю пример и мне непонятно

нет. это избыточно. открываю less файлы и читай код. там все написанно.

в крайнем случа в инспекторе.

да и по самому названию класса понятно что это за элемент и для чего он нужен.

.sr-only - вроде аннотации написано, что нужно только для лейблов для скринридеров. Но ведь здесь применяется не к лейблу? Непонятно мне, зачем тогда тут?

для того что бы читалка прочитала контент, а в браузере он не отобразился.

И совсем непонятно про 4 вида сетки, com-md-* понятно, но что делают остальные? Они предназначены для адаптации под большие и маленькие экраны, но как это проявляется?

потягай экран шире - уже и увидишь разницу.

Еще вопрос. Согласно дизайну, чем меньше экран, тем меньше шрифт в одной из колонок - мне чтобы это реализовать нужно дописать свои медиа запросы?

да, свои. БТСТ тут непричем

Link to comment
Share on other sites

  • 0

С предыдущими вопросами разобралась, как и поняла что да как в сетке). Но, например, чтобы поддерживать в ие8 хтмл5 дивы - надо дополнительно к стандартному дистру засунуть в папку assets и уже оттуда вставить


<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->

То есть изначально в дистрибутив(папка дист) это не встроено, верно? (может там в сжатом виде в одном из файлов код лежит, поэтому спрашиваю)

Кстати можно "бустрапить" не зная less?

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

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

П.С. кстати - это будет неверно, если в проект на бутсрапе я добавлю резетер стилей? ведь все-таки там принят нормалайзер.

Edited by Zverushka
Link to comment
Share on other sites

  • 0
То есть изначально в дистрибутив(папка дист) это не встроено, верно? (может там в сжатом виде в одном из файлов код лежит, поэтому спрашиваю)

встроено. а только что скачал с: http://getbootstrap.com/ архив и увидел: http://screencast.com/t/i6Qb37Qn6Fn

Кстати можно "бустрапить" не зная less?

да, но гибкость будет не та.

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

условно -- да. если дизайн подогнан под 960px сетку то проще-простого.

П.С. кстати - это будет неверно, если в проект на бутсрапе я добавлю резетер стилей? ведь все-таки там принят нормалайзер.

1. смотря что обнулять.

2. а чем normalize.css не подуше-то?

3. если что-то обнулять и/или изменять то:

3.1. проанализировать последствия

3.2. делать это после стилей БТСТ

3.3. ну и http://getbootstrap.com/customize/ никто не отменял :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy