使用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模板

回答

相关问题