代码 Joomla 模板与 Twitter Bootstrap

Question

我正在尝试学习如何基于 Twitter Bootstrap 构建 Joomla 模板。我对在 Joomla 2.5 中构建非常熟悉，我已经使用 HTML5 编写了一个模板，但只是想澄清几个问题以供我理解。

我已经根据 960px 宽度编写了我的 HTML/CSS，但不确定如何更改它以在 Bootstrap.[=14 中使用 row/span 类 =]

由于Bootstrap是基于12格的布局，我是否会在开始和结束时构建2个空白span 2 类以在其中具有8个网格的布局中间？

还是我做错了？

关于模块，我非常熟悉如何添加它，但只是想先熟悉一下布局，然后再添加站点内的其余数据。

我的HTML:

    <!DOCTYPE html>
<html>
<head>
    <title>Joomla Layout</title>
    <link href="styles.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="container"> 
        <header>
            <img src="imgs/logo.png">
            <nav>
                <ul>
                    <li><a href="/">home</a></li>
                    <li><a href="/">home</a></li>
                    <li><a href="/">home</a></li>
                    <li><a href="/">home</a></li>
                    <li><a href="/">home</a></li>
                    <li><a href="/">home</a></li>
                    <li><a href="/">home</a></li>
                </ul>       
            </nav>
        </header>
        <div class="banners"><img src="imgs/banner.jpg" width="100%"></div>
        <aside class="sidebar"><h2>My SideBar</h2></aside>
        <section class="content"><h2>This is my section1</h2></section>
        <section class="list"><h2>This is my section2</h2></section>
    </div>
        <footer>
            <h3>This is my footer</h3>
        </footer>
</body>
</html>

我的CSS:

    * {
    margin: 0px;
    padding: 0px;
}

body {
    background:#FFF;
}

.container {
    margin: 0px auto 0px auto;
    height: 1020px;
    width:960px;
    border:1px solid #CCC;
}

header  {
    text-align:center;
    height:16.27450980392157%;
    width:100%;
}

nav {
    float:left;
    height:6.372549019607843%;
    width:100%;
    text-align:center;
    background:#fe6b01;
}

.banners {
    float:left;
    height:24.80392156862745%;
    width:100%;
    background:#01AEF0;
    text-align:center;
}

.sidebar {
    height:600px;
    width:32.29166666666667%;
    background:#ec8400;
    float:left;
    text-align:center;
}

.content {
    height:300px;
    width:67.70833333333333%;
    background:#CCC;
    float:right;
    text-align:center;
}

.list {
    height:300px;
    width:67.70833333333333%;
    background:#01AEEF;
    float:right;
    text-align:center;
}

footer {
    text-align:center;
    font-weight:bold;
    height:16.37254901960784%;
    width:100%;
    background:#efefef;
    text-align:center;
    margin-top:-80px;
}

ul li {
    display:inline;
    text-align:left;
    margin:30px;
}

a {
    text-decoration:none;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}

@media only screen and (max-width: 960px) {

    .container {
    height:816px;
    width:768px;
}



@media only screen and (max-width: 768px) {

    .container {
    height:653px
    width:615px;
}

@media only screen and (max-width: 600px) {

    .container {
    height:510px;
    width:480px;
    }

    .sidebar {
    width:100%;
    float:left;
    }

    .content {
    width:100%;
    float:right;
}

.list {
    width:100%;
    float:right;
}

如有任何建议，我们将不胜感激。

提前致谢。

Answer 1

首先你需要加载框架：

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');

是的，它是使用 12 网格格式构建的，因此您可以根据需要的输出相应地调整跨度。您的 HTML 目前没有 bootstrap 设置。

作为一个很好的例子，看看 Joomla! Protostar 模板这是默认的 Bootstrap 模板。

它位于：

/Joomla! root/templates/protostar/

它会给你所有你需要的基础知识！

您可能还会发现 blank.vc 也很有用！

代码 Joomla 模板与 Twitter Bootstrap

Code Joomla Template with Twitter Bootstrap

html

css

joomla

twitter-bootstrap

joomla2.5