Twitter Bootstrap的Code Joomla模板

Question

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

我已经基于960px的宽度编写了HTML / CSS，但不确定如何在Bootstrap中使用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');

它使用12grid格式构建，是的，因此您可以根据需要调整跨度。 您的HTML目前没有引导程序设置。

举一个很好的例子，看看Joomla！ Protostar模板默认情况下，这是Bootstrap模板。

它位于：

/的Joomla！ 根/模板/原恒星/

它会为您提供入门所需的所有基础知识！

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

Twitter Bootstrap的Code Joomla模板

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-07 22:55:05

Twitter Bootstrap的Code Joomla模板

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-07 22:55:05

解决方案1
1 已采纳 2015-10-07 22:55:05