Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Заголовки в сетке Bootstrap

Добрый день. Заметил, что почти на всех сайтах с сеткой bootstrap заголовки секций не вносятся в столбцы сетки(Как на картинке заголовок "Настройка рекламы"). Структура строится по типу:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section id="name">
  <div class="container">
   <div class="row">
    <h1>Настройка рекламы</h1>
    <div class="col-lg-3">
     //Content
    </div>
    <div class="col-lg-3">
     //Content
    </div>
    <div class="col-lg-3">
     //Content
    </div>
    <div class="col-lg-3">
     //Content
    </div>
   </div>
  </div>
</section>
Почему заголовки не вносятся, допустим, в col-lg-12? Неясность вызывает еще и то, что на каких-то страницах заголовки таки вносят в столбцы, но на большинстве — нет.
И появился еще один вопрос: нужно ли таким заголовкам присваивать класс, чтобы потом через него задавать им свойства или работать через ".name h1{}" ?
Ответ: Спасибо, теперь понял. Раньше думал, что заголовки заносятся тоже, поскольку на сайте bootstrap написано, что наследниками row могут быть только столбцы.
Вопрос: Изменение сетки bootstrap

Добрый день, при верстке столкнулся с такой проблемой, что неправильно срабатывает сетка bootstrap. В index.html прописаны классы col-md-6 и col-md-6. Они должны срабатывать на max-width : 992px, вместо этого срабатывают на (max-width : 959px). Как можно сделать, чтобы все срабатывало стандартно на (max-width : 992px)?
Ответ: dvsnic, необходимо перейти на страницу и скомпилировать сетку удовлетворяющую Вашим условиям...
Вопрос: Ломается сетка Bootstrap и before

Здравствуйте. Появилась проблема при верстке по сетке Bootstrap.

<div class="col-xs-12 col-md-6>текст1</div>
<div class="col-xs-12 col-md-6>текст2</div>

текст2 находится не справа от текст1, а снизу

Такая же проблема с before. текст в списеке снизу before, а не справа
Помогите разобраться

 <body>
<div class="container-fluid">
<div class="meny">
<div class="row">
<a name="top"></a>
<div class="col-xs-12">
<nav>
<ul class="list-menu">
<li><a href="#top">Главная</a></li>
<li><a href="#skills">Навыки</a></li>
<li><a href="#portfolio">Портфолио</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="meny-arrow"></div>
<div class="contents">
<article>
<div class="row height-vh">
<div class="col-xs-12 col-md-6 center top-text">
<div class="name">
текст1
</div>
</div>
<div class="col-xs-12 col-md-6 top-text">
<div class="about">
<p>текст2
</p>
</div>
</div>
</div>
</article>


<div class="row skills height-vh">
<a name="skills"></a>
<h2>Практические навыки</h2>
<div class="col-xs-12 col-md-6 list-skills">
<ul>
<li><h4>HTML</h4></li>
<li><h4>CSS</h4></li>
<li><h4>HTML</h4></li>
<li><h4>HTML</h4></li>
</ul>
</div>
<div class="col-xs-12 col-md-6">
</div>
</div>
</div>
</body>



*
{
padding: 0;
margin: 0;
}
body
{
font-family: 'PT Sans', sans-serif;
}
nav
{
background: #006589;
padding: 15px;
box-shadow: 0 0 10px rgba(0,0,0,1);
height: 100vh;
}
.list-menu{
list-style: none;
}
.list-menu li a{
color: #fff;
display: block;
padding: 5px 15px 0 0;
font-size: 24px;
text-decoration: none;
}
/*.list-menu li a:hover{
background: #4db6f4;
}*/
.height-vh
{
height: 100vh;
}
.indent
{
padding: 20px;
}
.center
{
text-align: center;
}
.top-text
{
margin: 40px;
}
.name
{

}
.about
{
font-size: 18px;

}
.skills
{
background: #f0f0f0;
}
.list-skills ul
{
list-style: none;
}

.list-skills li:before
{
content: url(../images/inputs.png);
display: inline-block;
}
.fleft
{
float: left;
}
.fright
{
float: right;
}
Ответ:
Уже поняла. Перенос из за H4
Вопрос: Макет сайта и сетка bootstrap

Вопрос к знатокам bootstrap. Мне прислали макет который якобы подготовлен под сетку bootstrap, которым я никогда не пользовался. Почитал офф сайт, посмотрел видео в целом суть понятна. Начал замерять блоки в макете - левый сайдбар 270px, тело 675px, правый сайдбар 225px. Может я что-то упустил, но как эти размеры сопоставить шириной колонки в ~97px? Я понимаю так что макет вообще не под bootstrap.
Кусок макета в приложении.


Да и в процессе ознакомления с фреймворком возник похожий вопрос - например в макете ширина блока 313px а заказчик требует pixel-perfect - что тогда вы предпринимаете?
Ответ: Если хотите с легкостью верстать любые макеты, откажитесь от этого фреймворка. Да он классный, но заточен исключительно под типовые проекты и абсолютно не гибкий.
Вопрос: Как узнать подходит ли сетка Bootstrap для присланого макета псд?

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

Вопрос такой возник после прочтения данной статьи где говорилось что если дизайнер не создавал макет с использованием 12 колоночной сетки то возможности использовать бутстраповской сетки нет.


То как тогда можно узнать ,возможно ли использовать бутстрап?

А вот еще тема,где я вывесил пример макета(там немного другой вопрос),кстати,его можно адаптировать бутстрапом?
Ответ:
Сообщение от TVPNERO
Fedor92, в статье так же утверждается что не все макеты можно сверстать с помощью бутстраповской сетки
Я Вам ответил - всё приходит с опытом... Уже третью тему подряд Вы задаётесь одним и тем же вопросом, вместо того, чтобы сделать правильные выводы и двигаться дальше... Как прокачаете скилл и будете видеть геометрию шаблона - тогда ещё посмеётесь над своими темами... Bootstrap отнюдь не панацея для вёрстки, но большинство шаблонов для экономии времени с его помощью можно и нужно верстать... Любой опытный верстальщик Вам ответит, что шаблон проще верстать таким способом, какой знаешь... Не хотите юзать бутстрап не юзайте, но учтите, что при трудоустройстве в студию - Вас обязательно спросят владеете ли Вы фреймворком или его аналогами... И его знание только + в карму...
Вопрос: Указать наименование трёх сеток bootstrap в одном классе

Всем привет, в описании про бутстрап написано
CSS
1
2
3
4
5
6
7
8
9
10
11
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
 
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
 
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
 
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
как я понимаю здесь прописаны виды сеток
PHP
1
2
3
4
.col-xs-    
.col-sm-    
.col-md-    
.col-lg-
а я прописывал сетку col-md-, подскажите пожалуйста, можно ли прописывать в контейнере три сетки в одном классе?
Например так:
PHP
1
<div class="col-md-3; col-sm-3; col-xs-3">
Ответ: Coolfreeze, Только в перечисление классов не нужно ставить ;
Вопрос: Как выбрать только сетку Bootstrap?

В общем при скачивании оставил отметку только на "Grid system". Однако в скачанном архиве находятся два файла:

1) bootstrap.min.css
2) bootstrap-theme.min.css

Для того, чтобы работала только сетка необходимо оба подключать или один какой-то?
Ответ: Понятно, спасибо.
Вопрос: Сетка bootstrap + попиксельная вёрстка + адаптивность, не могу разобраться с размерами блоков

Пытаюсь скрафтить себе шаблон из psd для сайта портфолио, сначала сверстал без сетки бутстрапа, и начал настраивать там шрифты и блоки под разные разрешения экрана вроде бы получалось, но приходилось очень много изменять элементов в шаблоне под каждые разрешения экрана с интервалом по 100 пикселей, и всё равно на некоторых разрешения было то криво то не так, одно поменяешь, другое слетит.
Плюсы такой вёрстки были то что всё было поппиксельно как на psd всё совпадало(ну то что мне надо было).

Узнал о бутстрап и решил заново сверстать шаблон через сетку, сразу видно что будет легче настроить под все разрешения, но я не могу понять теперь как мне сделать что бы все блоки совпадали как на псд, т.е пиксельперфект был?. Вот скрин сетки (самого контента не считая шапки):

Ну разделил сайдбар - col-md-2, дальше мини блок с картинкой тоже col-md-2 и большой блок с картинкой col-md-6 и ещё мини блок col-md-2.
Всё работает как часики, все блоки стоят правильно:


За исключением что все блоки не имеют точную ширину, потому что у них стоит fluid т.е они в процентах.
Мне надо что бы мини блоки с картинкми были шире на 100 пикселей, а большой блок с картинкой был меньше, с такими размерами портится весь дизайн.
Не могу понять тогда как верстать правильно ....
Ответ: Всё работает как надо, сделал как указано тут
Вопрос: Правильное использование html5 тегов в Bootstrap

Правильно ли я размещаю html5 теги вместе с сеткой Bootstrap?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="container-fluid">
        <header>
            <div class="row">
                <div class="col-md-8"></div>
                <div class="col-md-8"></div>
                <div class="col-md-8"></div>
            </div>
        </header>
        
        <nav>
            <div class="row">
                <div class="col-md-24"></div>
            </div>
        </nav>
    </div>
Ответ: Creativeman, субъективное мнение ?
Вопрос: расскажите про Bootstrap. где он должен быть, какую среду разработки использовать?

решил поиграться с Bootstrap.
не часто занимался с JS фреймворками, поэтому в недоумении зачем все эта методика инсталлирования которая описана на сайте:
чтоб заинсталлировать нужен "bower", чтоб поставить "bower" нужен "npm", потом еше надо какой то "Grunt" поставить.
врезультате всей написанной методики все залезло в user\appdata\npm\bower\node_modules\bower_components\bootsrap...
еще где то в этой цепочке обязатеьно надо было поставить "git".
и что теперъ с этим всем делать? с какой стороны к этому всему подлезть? что запускать?
не хватило терпения дальше копатъся, взял тот же дистрибутив от Bootstrap и засунул традиционную в папку htdocs в apache, где остальные библиотеки JS. туда же в отдельные папки записал пару Bootstrap-html-шаблонов со стилями.
только тогда все "схватилось" и шаблоны заработали. вроде ничего другого и ненадо.

как правильно работать с Bootstrap, где должны быть его библиотеки, как он должен быть корректно заинсталлирован?
и надо ли все ето npm, bower,git, Grunt?
вообще какой отладчик лучше использовать для Bootstrap и других JS фреимворков?
Ответ:
oaken
Alex123F
там конкретно втирают что надо все это делать то что я написал выше.
Ты ошибаешся, в самом верху упомянутой страницы есть большая кнопка Download Bootstrap, чуть ниже - раздел Bootstrap CDN. Это именно то что тебе нужно.
Все остальные способы установки используются в фреймворках типа NodeJs для облегчения жизни разработчику по отслеживанию версионности и зависимостей между пакетами.
Вывод, если ты не знаешь что это - оно тебе не нужно.
А так да, бутстрап серьезный пакет, поэтому предоставляет практически любые способы установки под любые фреймврки, а как иначе-то?


ладно, будем считать что я пропустил мимо ушей эту "кнопку" :).. но пока мало что нового, познавательного.
скажитe хоть кто-нибуть какую среду разработки для JS удобно щас использовать?
есть смысл в WebStrom или есть что то более резонное?