PSD для начальной загрузки

Question

У меня есть скаченный .psd посмотреть здесь: http://webtechdesk.com/boot/theme.png

Я хочу, чтобы преобразовать его в начальной загрузках на основе отзывчивой HTML темы, любой орган может помочь мне об этом. Я знаю и хорошо знаком с сеткой и создаю скелет в бутстрапе, но главная проблема заключается в том, чтобы установить фоновое изображение в том же самом. как это сделать?

также этот psd имеет слайдер, показанный в заголовке (вы можете увидеть изображение мальчиков & девушек, стоящих бок о бок). В этом слайдере какой-то округлый снизу и плоский сверху, как сделать такой слайдер ?.

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

Ваша помощь приветствуется заранее.

Answer 1

Вы можете взять уже разработанную веб-страницу, которая структурирована с использованием бутстрапа. А затем начните создавать/интегрировать свои требования к дизайну. Это может помочь вам легко начать. Ниже я нашел некоторые веб-макеты, которые выглядят где-то похожими на ваш psd.

http://startbootstrap.com/template-categories/all/
http://startbootstrap.com/template-overviews/full-width-pics/
http://startbootstrap.com/template-overviews/heroic-features/

И дать кривую изображений (как показано в вашем СДП), вы можете использовать ниже CSS с DIV (который может содержать изображения). Откорректируйте эти значения на основе ваших потребностей.

border-top-left-radius: 2em; 
    border-bottom-left-radius: 2em; 

Answer 2

Вам просто нужно включить загрузку, создать один пустой файл css и включить после загрузки. После этого начните строить свой дизайн. У вас есть все элементы в начальной загрузке, что вам нужно, только вам нужно создать шаблон для своего сайта.

Если вам нужно манипулировать какой-либо сеткой, вы можете добавить дополнительные классы в свой HTML и дать стиль этого класса.

Пример:

<div class="row"> 
    <div class="col-md-4 one">.col-md-4</div> 
    <div class="col-md-4 two">.col-md-4</div> 
    <div class="col-md-4 three">.col-md-4</div> 
</div> 

в CSS

.one{ 
border: 1px solid #f00 
} 
.two{ 
border: 1px solid #000 
} 
.three{ 
border: 1px solid #f88 
} 

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

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

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