Верстка бутстрап

[yulshaz@mail.ru]

не могу сверстать данный легкий макет на бутстрап. Без бутстрапа проблем нет)но нужно сделать именно на бутстрапе.

https://cloud.mail.ru/public/73vN/u1qPSAdPU

вроде бы все понятно. но из-за стандартных паддингов и прочих фичек  ничего не выходит, и не понимаю,правильно ли я вообще начинаю делать+ всякие тени и прочее, ничего не понимаю.Помогите пожалуйста, если можно, то подробно разъяснить макет. Спасибо!

 <div class="container">            <div class="row header">                <div class="col-lg-4">                    <img src="img/logo.png" alt="Лого">                </div>                <div class="col-lg-3 col-lg-offset-5">                    <div class="right-inner-addon">                        <i class="icon-search"></i>                         <input type="search"                          class="form-control"                             placeholder="Search" />                        </div>                </div>              </div>            <nav>                                    <ul class="nav nav-justified">                        <li class="active"><a href="#">О компании</a></li>                        <li><a href="#">Услуги</a></li>                        <li><a href="#">Объекты</a></li>                        <li><a href="#">Закупки</a></li>                        <li><a href="#">Партнеры</a></li>                        <li><a href="#">Новости</a></li>                        <li><a href="#">Контакты</a></li>                     </ul>                              </nav>            <div class="slider">                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">                  <!-- Indicators -->                    <ol class="carousel-indicators">                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>                        <li data-target="#carousel-example-generic" data-slide-to="4"></li>                    </ol>                  <!-- Wrapper for slides -->                    <div class="carousel-inner" role="listbox">                        <div class="item active">                          <img src="img/slider_background.jpg" alt="Картинка 1">                          <div class="carousel-caption">                            ...                          </div>                        </div>                        <div class="item">                          <img src="img/slider_background.jpg" alt="...">                          <div class="carousel-caption">                            ...                          </div>                        </div>                        <div class="item">                          <img src="img/slider_background.jpg" alt="...">                          <div class="carousel-caption">                            ...                          </div>                        </div>                        <div class="item">                          <img src="img/slider_background.jpg" alt="...">                          <div class="carousel-caption">                            ...                          </div>                        </div>                        <div class="item">                          <img src="img/slider_background.jpg" alt="...">                          <div class="carousel-caption">                            ...                          </div>                        </div>                    </div>                </div>            </div>            <div class="row">                <ul class="lg-tabs">                    <li class="active">                        <img src="img/build.png" alt="">                        <h4>Услуги проектирования</h4>                        </li>                    <li>                        <a href="#ready" data-toggle="tab"> <i class="fa fa-plane"></i>                                                        <h5>Услуги проектирования</h5>                        </a>                    </li>                    <li>                        <a href="#code" data-toggle="tab">                                                        <h5>Услуги проектирования</h5>                        </a>                    </li>                    <li>                        <a href="#premiumPlugins" data-toggle="tab">                                                    <h5>Услуги проектирования</h5>                        </a>                    </li>                    <li>                        <a href="#ready" data-toggle="tab"> <i class="fa fa-plane"></i>                                                    <h5>Услуги проектирования</h5>                        </a>                    </li>                </ul>            </div>                     </div>

.container {  width: 1012px;  padding: 0;}/*nav begin*/nav {  border-top: 1px solid #dbddde;}.nav > li > a {  color: #3c4148;  font-weight: bold;}.nav > li > a:hover {  text-decoration: none;  background-color: #f29700;  color: white;}.nav > li > a:focus {  background-color: #3c4148;  color: white;}/*end nav*//*slider begin*/.carousel-indicators li {  border-radius: 0;  background-color: none;}.carousel-indicators li:hover {  color: #dbddde;}.carousel-indicators .active {  background-color: #f29700;  border: none;}/*не знаю, можно ли так делать*/.carousel-indicators li:not(.active):hover {  background-color: #857b6e;}/*slider end*//*service begin*/.lg-tabs {  margin: auto;  padding: 0;  list-style: none;}.lg-tabs li {  background: white;  position: relative;  min-height: 1px;  float: left;}.lg-tabs img {  float: left;  margin: 0 24px 0 0;}li {  font-family: MyCustomFont, Verdana, Arial, sans-serif;}/*service end*/@media (min-width: 768px) {  .lg-tabs li {    width: 20%;    padding: 25px 15px;    margin-right: -2px;  }}

[Great Rash]

Если макет нарисован не под бутстрап, то впереди вас ждёт только гемор, гемор и ещё раз гемор. Выхода два:

1) забиваете на него и начинаете писать свой код

2) делаете кастомную сборку (например берёте только грид) и начинаете переопределять стили

[kattiperk]

Это требования такие - на бутстрапе?

Просто да, или только грид с переопределением или другие сетки, более легкие. Если только адаптив нужен от бутстрапа.

[yulshaz@mail.ru]

Если макет нарисован не под бутстрап, то впереди вас ждёт только гемор, гемор и ещё раз гемор. Выхода два:

1) забиваете на него и начинаете писать свой код

2) делаете кастомную сборку (например берёте только грид) и начинаете переопределять стили

 

Это требования такие - на бутстрапе?

Просто да, или только грид с переопределением или другие сетки, более легкие. Если только адаптив нужен от бутстрапа.

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

второ

второй момент - блоки внизу http://prntscr.com/906kr5

я их делаю списком, ставлю display:table-cell. всем задаю фиксированную высоту и ширину.Иконочки сохраняю в png.Иконке и названию блока лучше задать float, или как его лучше сделать?

столкнулась с проблемой:когда ховер на блоке, получается вот такое http://prntscr.com/906ml5- вокруг иконки белый цвет. как сделать,чтобы полностью все было серым?

[Mozzie]

 

Если макет нарисован не под бутстрап, то впереди вас ждёт только гемор, гемор и ещё раз гемор. Выхода два:

1) забиваете на него и начинаете писать свой код

2) делаете кастомную сборку (например берёте только грид) и начинаете переопределять стили

 

Это требования такие - на бутстрапе?

Просто да, или только грид с переопределением или другие сетки, более легкие. Если только адаптив нужен от бутстрапа.

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

второ

второй момент - блоки внизу http://prntscr.com/906kr5

я их делаю списком, ставлю display:table-cell. всем задаю фиксированную высоту и ширину.Иконочки сохраняю в png.Иконке и названию блока лучше задать float, или как его лучше сделать?

столкнулась с проблемой:когда ховер на блоке, получается вот такое http://prntscr.com/906ml5- вокруг иконки белый цвет. как сделать,чтобы полностью все было серым?

 

 

Посмотри примеры слайдеров в интернете и сделай, второй вопрос не понял, но знаю одно не умеешь верстать сделай красиво.

hover:просто вырежи картинку без белового фона и будет тебе счастье.

[yulshaz@mail.ru]

Если макет нарисован не под бутстрап, то впереди вас ждёт только гемор, гемор и ещё раз гемор. Выхода два:

1) забиваете на него и начинаете писать свой код

2) делаете кастомную сборку (например берёте только грид) и начинаете переопределять стили

Это требования такие - на бутстрапе?

Просто да, или только грид с переопределением или другие сетки, более легкие. Если только адаптив нужен от бутстрапа.

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

второ

второй момент - блоки внизу http://prntscr.com/906kr5

я их делаю списком, ставлю display:table-cell. всем задаю фиксированную высоту и ширину.Иконочки сохраняю в png.Иконке и названию блока лучше задать float, или как его лучше сделать?

столкнулась с проблемой:когда ховер на блоке, получается вот такое http://prntscr.com/906ml5- вокруг иконки белый цвет. как сделать,чтобы полностью все было серым?

Посмотри примеры слайдеров в интернете и сделай, второй вопрос не понял, но знаю одно не умеешь верстать сделай красиво.

hover:просто вырежи картинку без белового фона и будет тебе счастье.

по поводу слайдера - хочу вставить bxslider - но там кнопки перехода стоят ниже картинок. Для меня возник интересный вопрос:а как разместить эти кнопки на изображении,как,например,в том же слайдере бутстрапа?

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

<li>

<а>

<img>

<span>

</span>

</a>

</li>

Edited November 8, 2015 by yulshaz@mail.ru

[Mozzie]

 

 

 

Если макет нарисован не под бутстрап, то впереди вас ждёт только гемор, гемор и ещё раз гемор. Выхода два:

1) забиваете на него и начинаете писать свой код

2) делаете кастомную сборку (например берёте только грид) и начинаете переопределять стили

Это требования такие - на бутстрапе?

Просто да, или только грид с переопределением или другие сетки, более легкие. Если только адаптив нужен от бутстрапа.

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

второ

второй момент - блоки внизу http://prntscr.com/906kr5

я их делаю списком, ставлю display:table-cell. всем задаю фиксированную высоту и ширину.Иконочки сохраняю в png.Иконке и названию блока лучше задать float, или как его лучше сделать?

столкнулась с проблемой:когда ховер на блоке, получается вот такое http://prntscr.com/906ml5- вокруг иконки белый цвет. как сделать,чтобы полностью все было серым?

Посмотри примеры слайдеров в интернете и сделай, второй вопрос не понял, но знаю одно не умеешь верстать сделай красиво.

hover:просто вырежи картинку без белового фона и будет тебе счастье.

по поводу слайдера - хочу вставить bxslider - но там кнопки перехода стоят ниже картинок. Для меня возник интересный вопрос:а как разместить эти кнопки на изображении,как,например,в том же слайдере бутстрапа?

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

<li>

<а>

<img>

<span>

</span>

</a>

</li>

 

Есть множество решений которые приводят к одному и тому же результату,  и ваше решение я бы не назвал не правильным.

[yulshaz@mail.ru]

Если макет нарисован не под бутстрап, то впереди вас ждёт только гемор, гемор и ещё раз гемор. Выхода два:

1) забиваете на него и начинаете писать свой код

2) делаете кастомную сборку (например берёте только грид) и начинаете переопределять стили

Это требования такие - на бутстрапе?

Просто да, или только грид с переопределением или другие сетки, более легкие. Если только адаптив нужен от бутстрапа.

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

второ

второй момент - блоки внизу http://prntscr.com/906kr5

я их делаю списком, ставлю display:table-cell. всем задаю фиксированную высоту и ширину.Иконочки сохраняю в png.Иконке и названию блока лучше задать float, или как его лучше сделать?

столкнулась с проблемой:когда ховер на блоке, получается вот такое http://prntscr.com/906ml5- вокруг иконки белый цвет. как сделать,чтобы полностью все было серым?

Посмотри примеры слайдеров в интернете и сделай, второй вопрос не понял, но знаю одно не умеешь верстать сделай красиво.

hover:просто вырежи картинку без белового фона и будет тебе счастье.

по поводу слайдера - хочу вставить bxslider - но там кнопки перехода стоят ниже картинок. Для меня возник интересный вопрос:а как разместить эти кнопки на изображении,как,например,в том же слайдере бутстрапа?

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

<li>

<а>

<img>

<span>

</span>

</a>

</li>

Есть множество решений которые приводят к одному и тому же результату, и ваше решение я бы не назвал не правильным.

может,подскажете,как лучше сделать эти блоки?

[Mozzie]

может,подскажете,как лучше сделать эти блоки?

Если вам станет легче я скажу что я бы тоже сделал списком. К примеру:

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

 

 

И кстати свою первую вёрстку я выставлю только завтра так что я тоже не профессионал просто есть какое-то понимание.