html - 如何在 IBM Websphere Portal 8 中为自定义主题实现 Twitter Bootstrap Framework?

标签 html css twitter-bootstrap-3

我刚刚了解了 bootstrap 框架,它是一个基于网格的 css 框架,但我不知道如何在 IBM Websphere Portal 8 中实现。

代码

<!DOCTYPE html> 
<body class="lotusui30dojo tundra locale_en">    
    <div class="wpthemeFrame"> 
        <header role="banner">
    <div class="wpthemeHeader"> 
        <a rel="dynamic-content" href="dyn-cs:id:customTheme_preview"></a> 
    <div class="wpthemeInner"> 
    <div class="wpthemeLogo wpthemeLeft">

最佳答案

我建议您使用 Bootstrap 创建一个普通的静态 HTML 原型(prototype)。一旦您确定它可以正常工作(以响应方式),您就可以开始将源代码移植到 Portal。有 3 个部分:

  1. 首先,您必须将中间内容区域以外的 html 部分(即页眉部分和页 footer 分)复制粘贴到自定义文件夹中的 theme_en.html 中。然后将css和JS链接头部分替换为

然后用适当的 Dynamic Spot 内容(JSP 文件)替换代码块。例如,

<a rel="dynamic-content" href="res:/customTheme/themes/html/dynamicSpots/banner.jsp"></a>   

此外,请确保在页面末尾有这个,

<div class="wpthemeComplementaryContent" id="wpthemeComplementaryContent" role="region" aria-labelledby="wpthemeComplementaryContentText">
<span class="wpthemeAltText" id="wpthemeComplementaryContentText" >Complementary Content</span>
<a rel="dynamic-content" href="co:config"></a>
</div>
  1. 现在我们必须从 HTML 区域的中间部分获取布局结构,并将其用于创建模板布局。请记住,在每个模板布局中,我们必须为隐藏的小部件保留 div。更好的方法是从 Template Layouts 复制一个现有的 layout.html 文件并重命名并在其中进行修改。如果您使用的是 Bootstrap,则不必使用默认的 WP 类。但很少有必须集成的,比如DndRow、DndColumn、Componet-Container等。

    1. 现在对于每个页面的特定样式,您可以在 Presentation 模板中进行管理。

关于html - 如何在 IBM Websphere Portal 8 中为自定义主题实现 Twitter Bootstrap Framework?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22825199/

相关文章:

javascript - 当滚动条到达底部时激活按钮

html - 如何使 <li> 下拉列表的元素向左溢出

php - 301 永久重定向以更改 URL 以仅使用带有单个参数的查询字符串是否会损害 SEO?

javascript - 如何将事件监听器添加到ag网格单元格内的元素(使用js或jquery,而不是Angular,不是ReactJS,不是Vue)

javascript - Spring java - 圆 Angular 在 ie 中不起作用

javascript - 为什么这个元素在我的 SVG/CSS/JS 动画中转换为 0,0,0?

JQuery UI 复选框 radio 堆叠在彼此之上而不是并排

html - 如何使列表项随屏幕大小缩放并保持水平?

css - 有没有办法可以在同一行的 <h1> 之后放置文本?

twitter-bootstrap - 我应该使用 CDN 中的 Bootstrap 还是在我的服务器上复制?