使用Twitter Bootstrap編碼Joomla模板

我想了解如何基於Twitter Bootstrap構建Joomla模板。我對Joomla 2.5內部的構建非常熟悉，並且我使用HTML5編寫了一個模板，但僅僅想澄清一些問題以便理解。使用Twitter Bootstrap編碼Joomla模板

我已經寫了基於960px寬度的HTML/CSS，但不知道如何將其更改爲在Bootstrap中使用row/span類。

由於Bootstrap基於12個網格佈局，我會在開始時和結束時建立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; 
}

任何意見將非常感激。

在此先感謝。

來源

2015-10-07 Michael Owen

感謝您的支持 –

首先你需要加載的框架與：

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

它使用12grid格式是內置，所以你會相應地調整跨度到你想要的輸出。您的HTML目前沒有引導程序設置。

作爲一個很好的例子，請看Joomla！ Protostar模板默認爲Bootstrap模板。

它位於：

/的Joomla！ root/templates/protostar/

它會給你所有的基本知識，你需要讓你去！

你也可能會發現blank.vc也很有用！

來源

2015-10-07 22:55:05 tonypartridge

XWS，感謝您的回覆。真的很感激它。將看看你提到的讓我開始。 –

使用Twitter Bootstrap編碼Joomla模板

回答

相關問題