PSD 到 bootstrap

Question

我下载了 .psd 文件，请看这里：http://webtechdesk.com/boot/theme.png

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

此 psd 也有一个滑块显示在 header 中（您可以看到男孩和女孩站着的图像 side-by-side）。这个slider里面有一些下圆上平的那种slider怎么制作？

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

提前感谢您的帮助。

Answer 1

您只需包含 bootstrap，创建一个空 css 文件并在 bootstrap 之后包含。之后开始构建您的设计。您拥有 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 构建。然后开始 making/integrating 您的设计要求。它可以帮助您轻松入门。下面我找到了一些网页布局，看起来与您的 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 到 bootstrap

PSD to bootstrap

html

twitter-bootstrap

responsive-design

themes

psd