Question

我有一个下载的.psd，请看这里：http://webtechdesk.com/boot/theme.png

我想在基于bootstrap的响应式html主题中转换它，任何人都可以帮我解决这个问题。我知道并熟悉网格系统并在引导程序中制作骨架，但主要问题是将背景图像设置为相同。怎么做？

此psd还有标题中显示的滑块（你可以看到男孩和女孩并排站立的图像）。在这个滑块是从底部圆形和从顶部平坦如何制作这种滑块？。

我搜索了谷歌上的一些滑块，但所有结果滑块都是完全矩形或方形的？

提前感谢您的帮助。

Answer 1

你只需要包含bootstrap，创建一个空的css文件并在bootstrap之后包含。之后开始构建您的设计。您拥有引导程序中的所有元素，只需要为您的网站构建模板。

如果您需要使用某些网格进行操作，可以在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边框半径，你需要找出最好的，你需要支持移动设备。

Answer 2

您可以使用已设计的使用bootstrap构建的网页。然后开始制作/整合您的设计要求。它可以帮助您轻松上手。下面我发现了一些类似于你的psd的网页布局。

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

为了给图像提供曲线（如你的psd所示），你可以使用下面的css到div（可能包含图像）。根据您的需要调整这些值。

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

PSD引导程序

2 个答案: