Как с наименьшим усилиями подключить сетку bootstrap?

Question

[Raul Abdullin]

Всем привет! Я начинающий верстальщик. Хочу в своих проектах использовать Bootstrap сетку, всё что остальное входит в пакет Bootstrap мне не нужно. Попытался через официальный сайт кастомизировать сетку, но не разобрался как. Там столько галочки и полей. Попробовал поставить галочку на Bootstrap Grid, всё остальное убрал. Скачал, но в итоге что-то совсем не то скачалось. Вообщем запутался немного. Выручайте :)

Comments

[Сергей delphinpro]

Вам нужны классы
.container-fluid
.container
.row
.col-*

Возможно, вам понадобятся также классы .visible-* и .hidden-*

Удалите вручную из того файлика, который вы скачали через кастомизатор всё, кроме них и пользуйтесь сеткой.
Сохраните себе отредактированный файлик на будущее.

[Сергей delphinpro]

и правило * {box-sizing: border-box;} тоже необходимо, иначе сетка развалится.

[Raul Abdullin]

Сергей, спасибо еще раз, но почему-то не могу найти в коде бутстрапа * {box-sizing: border-box;}
ps использую бутстрап 3.3.7

[Сергей delphinpro]

raulvodov, https://github.com/twbs/bootstrap/blob/v3.3.7/less...

[Raul Abdullin]

Сергей, посмотрел код, вообще не понимаю, что это и для чего? Написано, что бутстрап, при этом ни колонок, ни контейнеров, о которых вы писали выше нет

[Сергей delphinpro]

raulvodov, о препроцессорах вообще что ли ничего не слышали?..
Смотрите тогда css файл https://github.com/twbs/bootstrap/blob/v3.3.7/dist...

[Raul Abdullin]

Сергей, sass немного освоил, но пока не углубляюсь, чтобы не запутаться, хочу первые парочку сайтов сверстать без препроцессоров.

[Raul Abdullin]

Сергей, спасибо большое за код. Я тут свой неболшой резет собрал, как считаете, нормально?

/* сброс стилей браузера */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 10px;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
img, video, embed, object {
	max-width: 100%;
}
/* конец кода сброса стилей браузера */

[Сергей delphinpro]

raulvodov, Вот, изучите. https://github.com/necolas/normalize.css/blob/mast...
Там каждое правило прокомментировано, для чего оно есть.

[Raul Abdullin]

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

[Сергей delphinpro]

raulvodov, тот же. но может быть чуть более старая версия. не проверял.

[Raul Abdullin]

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

Answer 1

[Илья Хребет]

GitHub: zirafa/bootstrap-grid-only

Вас может интересовать css/grid12.css.

Comments

[alex-1917]

тогда уже и затереть все ненужные цифровые варианты, например семерки вообще не приложу ума кто использует.
по сути чаще всего используется деление на 6+6, на 3+3+3, на 3+9 ну и комбинации от них - ВСЁ!
т.е. 3, 6, 9
а это из вашего файла минус 600 строк)))
еще выкинуть pull offset push

[Сергей delphinpro]

alex-1917, именно для этого существует препроцессорная версия — чтобы каждый мог собрать то что ему нужно. А билд в репе это максимально универсальный и тяжёлый вариант.

Answer 2

[ThunderCat]

Я начинающий верстальщик.

...

Попытался через официальный сайт кастомизировать сетку, но не разобрался как.

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

Answer 3

[snap44]

Мастер заголовков Х) даже язвить не стану)

Comments

[alex-1917]

90 уровень!!

Answer 4

[MedPas]

Не хотелось занудствовать, но придется. Согласен с вышесказанным -

Так может и не стоит?

В том смысле, что еще рано. Может, пока что, стоит поплотнее заняться HTML, поковыряться в CSS, сваять свою страничку, с файлом на over100500 строк. А потом еще одну - совершенно другую... и еще одну - абсолютно третью... и т.д., и т.п.. Если, не будет понимания, как работают элементы, сами по себе и взаимодействуя между собой - не сладко придется. На одном фреймворке далеко не уедешь.
Вот эта вещь, всегда должна быть открыта.

А по теме - суй вот это в шапку.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">