佐達卡

Sadaka 文档

使用 Bootstrap、Sass 和 Compass 构建的慈善/非营利 HTML5 模板。

感谢您购买我的模板。如果您有任何疑问，请随时给我发送电子邮件：support@ouarmedia.com。非常感谢！

模板文件夹结构

  • assets/ -包括模板资产。
    • css/ ——包含模板css文件。
    • fonts/ -包含引导字体文件。
    • images/ -模板中使用的所有图像都位于此文件夹中
    • js/ ——包含模板中使用的 JS 脚本。
    • sass/ ——包含模板sass文件。
  • php/ -包括 mail.php，它是模板中联系表单的邮件程序。

HTML 结构

该模板基于 Bootstrap 框架 - http://getbootstrap.com/ 

  2.     <div class="row">
  3.       <div class="col-md-1">.col-md-1</div>
  4.       <div class="col-md-1">.col-md-1</div>
  5.       <div class="col-md-1">.col-md-1</div>
  6.       <div class="col-md-1">.col-md-1</div>
  7.       <div class="col-md-1">.col-md-1</div>
  8.       <div class="col-md-1">.col-md-1</div>
  9.       <div class="col-md-1">.col-md-1</div>
  10.       <div class="col-md-1">.col-md-1</div>
  11.       <div class="col-md-1">.col-md-1</div>
  12.       <div class="col-md-1">.col-md-1</div>
  13.       <div class="col-md-1">.col-md-1</div>
  14.       <div class="col-md-1">.col-md-1</div>
  15.     </div>
  16.     <div class="row">
  17.       <div class="col-md-8">.col-md-8</div>
  18.       <div class="col-md-4">.col-md-4</div>
  19.     </div>
  20.     <div class="row">
  21.       <div class="col-md-4">.col-md-4</div>
  22.       <div class="col-md-4">.col-md-4</div>
  23.       <div class="col-md-4">.col-md-4</div>
  24.     </div>
  25.     <div class="row">
  26.       <div class="col-md-6">.col-md-6</div>
  27.       <div class="col-md-6">.col-md-6</div>
  28.     </div>

W3C 有效：HTML 代码在validator.w3.org上完全有效

样式css和sass 文件

文件名 描述
styles.css 主模板 css 文件。
bootstrap.css Bootstrap css 文件。
bootstrap.min.css Bootsrap 最小化的 css 文件。
font-awesome.min.css Font awesome 最小化的 css 文件。
owl.carousel.css OWL Carousel 插件 css 文件。
prettyPhoto.css PrettyPhoto 灯箱插件 css 文件。

该模板是用Sass 和 Compass构建的，您可以在 /sass/style.scss 上编辑 sass 文件

Google 字体：

默认字体为Open Sans。
标题字体：Dosis

JavaScript

文件名 描述
main.js 主要的 javascript 文件（您的自定义内容放在这里）。
bootstrap.js Bootstrap javascript 文件。（不建议在生产环境中使用未压缩的文件）。
bootstrap.min.js Bootstrap最小化的javascript 文件。
jquery-1.11.1.min.js jQuery 文件。
jquery.prettyPhoto.js PrettyPhoto 灯箱插件 javascript 文件。
modernizr-2.6.2.min.js Modernizr 文件（用于浏览器兼容性目的）。
owl.carousel.js Owl 轮播插件 javascript 文件（不建议在生产环境中使用非最小化文件）。
owl.carousel.min.js Owl 轮播插件最小化的 javascript 文件。

谷歌地图

在js/main.js 文件中编辑：mapLatitude和mapLongitude变量

图标

Font Awesome为您提供可立即自定义的可扩展矢量图标 - 大小、颜色、阴影以及任何可以使用 CSS 功能完成的操作。

如果您需要更多信息，请访问http://fontawesome.io/。

旋转木马

主滑块

对于主滑块，模板使用bootstrap 默认的轮播，有关更多信息和帮助，请访问http://getbootstrap.com/javascript/#carousel。


赞助商轮播

对于赞助商轮播，模板使用猫头鹰轮播，如需更多信息和帮助，请访问http://www.owlcarousel.owlgraphic.com。

联系表格

安装模板时，务必将php/mail.php文件顶部的电子邮件地址更改为您希望此表单发送到的电子邮件地址。


致谢

资源：

字体：

图片：