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