Bootstrap Wrapper 插件的使用说明

Bootstrap Wrapper 适用于dokuwiki。国内好像用得人不多,中文资料也很少。
我把使用过程记录一下,有需要使用的朋友可以留言交流。

这里可以看到代码的效果图 http://wiki.youxin001.com/wiki/bootstrap_wrapper

 

  • Macros
    This plugin provide a special macro to control the flow of the page. 

    • ~~CLEARFIX~~ Clear the float  清除浮动
    • ~~PAGEBREAK~~ Add a page break 
  • Accordion
    • 可上下缩放的内容段落。手风琴
    • <accordion> <panel title=”Collapsible Group Item #1″> 内容1</panel> <panel title=”Collapsible Group Item #2″> […] </panel> <panel title=”Collapsible Group Item #3″> […] </panel> </accordion>
  • Affix
    The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. 

    • http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/affix
    • 定义浮动窗口
  • Alerts
    Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. 

    • 警告、提示文本框
    • type : success info(默认) warning danger
    • <alert type=”success”>…</alert>
    • <alert type=”info”>…</alert>
    • <alert type=”warning”>…</alert>
    • <alert type=”danger”>…</alert>
    • <alert type=”warning” dismiss=”true”>**Warning!** Better check yourself, you’re not looking too good.</alert> 可关闭
    • <alert type=”warning” dismiss=”true” icon=”fa fa-warning”>**Warning!** Better check yourself, you’re not looking too good.</alert> 有icon图标 Font icon class (eg. Glyphicon or Font-Awesome) 
  • Badges 徽章
    • Inbox <badge>42</badge> 反白显示。
    • <btn type=”primary”>Messages <badge>4</badge></btn> 按钮内使用
  • Collapse 配合按钮使用,点击显示文本内容
    • collapse = id名
    • <button collapse=”foo”>Click Me</button>   <collapse id=”foo” collapsed=”true”><well> 隐藏的内容</well></collapse>
  • Popovers 配合按钮使用
    • 可设置不同方向弹出说明文字
    • <popover title=”Popover title” content=”And here’s some amazing content. It’s very engaging. Right?”><btn type=”danger” size=”lg”>Click to toggle popover</btn></popover>
    • placement=”right” (Four options are available: top, right, bottom, and left aligned. )
    • trigger=”focus” 点击可消失,建议添加
    • html=”true” 可插入 DokuWiki syntax
    • http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/popover
  • Callouts 标注 -缩进的段落
    • 类型:default 、primary 、success、 info 、warning、 danger (question、 tip) 
    • 可自定义标题、颜色、图标(title、color、icon)
  • Carousel 图片滚动轮播
    • http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/carousel
    • 类似slider的效果,可添加标题和内容文字
    • <carousel></carousel>
  • Grids 网格显示
    • xs Column size (1 ~ 12) 可分多栏显示内容
    • sm Column size (1 ~ 12) 可分多列
    • lg Column size (1 ~ 12)
    • md Column size (1 ~ 12)
  • Image
    • shape : rounded, circle, thumbnail(正常、圆形、加边框)
    • <image shape=”thumbnail”> {{:wiki:plugin:bootswrapper:image-placeholder.png?nolink&100|}} </image>
  • Jumbotron
    • 预定义内容背景,适合在页头或者首页使用
    • 可自定义背景图片和文本颜色(不能定义背景颜色)
  • Labels 六种标签
    • <label type=”default”>default</label>
    • <label type=”primary”>primary</label>
    • <label type=”success”>success</label>
    • <label type=”info”>info</label>
    • <label type=”warning”>warning</label>
    • <label type=”danger”>danger</label>
  • Lead 段落
    • 放大文字,突出显示重要段落
    • <lead>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</lead>
  • List Group
    • 表格的形式展示列表内容,用与sidebar的菜单
    • <list-group>列表内容</list-group>
    • 列表中可添加链接、说明文字
  • Modal 配合按钮使用,点击弹出窗体显示内容
    • <btn type=”primary” size=”lg” modal=”modal-demo”>Launch demo modal</btn>
    • <modal id=”modal-demo” title=”Modal title”>这里是内容</modal>
      • size=”lg” 或者size=”sm” 控制弹出窗体的大小
      • fade=”false” 关闭窗体弹入效果
      • remote=”:wiki:welcome” 弹出定义的wiki页面
      • http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/modal
  • Navs (Tabs & Pills) 制作导航菜单
    • 可水平或者垂直显示
    • 可制作tab页
  • Page header
    • 增加了标题与上下文的间距
    • <page-header>===== Example page header =====</page-header>
  • Panels 面板
    • http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/panel
    • 用于特殊段落、表格、列表
    • 可设置标题和副标题 title=”Panel title” subtitle=”Panel subtitle”
    • 五种类型 default, primary, success, info, warning, danger
      • <panel type=”primary” title=”Panel title”>Panel content</panel>
      • <panel type=”success” title=”Panel title”>Panel content</panel>
      • <panel type=”info” title=”Panel title”>Panel content</panel>
      • <panel type=”warning” title=”Panel title”>Panel content</panel>
      • <panel type=”danger” title=”Panel title”>Panel content</panel>
    • 设置为表格形式或者列表
      • <panel type=”default” title=”Panel title” no-body=”true”>
    • icon=”glyphicon glyphicon-home”
  • Progress Bar 进度条
    • <progress> <bar value=”60″ showvalue=”true” type=”success”></bar> </progress>
  • Text
    • 文本的对齐方式
      • <TEXT align=”left”>Left aligned text.</TEXT>
      • <TEXT align=”center”>Center aligned text.</TEXT>
      • <TEXT align=”right”>Right aligned text.</TEXT>
      • <TEXT align=”justify”>Justified text.</TEXT>
      • <TEXT align=”nowrap”>No wrap text.</TEXT>
    • 大小写:<text transform=”lowercase”>Lowercased text.</text> <text transform=”uppercase”>Uppercased text.</text> <text transform=”capitalize”>Capitalized text.</text>
    • 六种颜色
      • <text type=”muted”> […] </text>
      • <text type=”primary”> […] </text>
      • <text type=”success”> […] </text>
      • <text type=”info”> […] </text>
      • <text type=”warning”> […] </text>
      • <text type=”danger”> […] </text>
    • 不同的背景
      • <text background=”primary”> […] </text>
      • <text background=”success”> […] </text>
      • <text background=”info”> […] </text>
      • <text background=”warning”> […] </text>
      • <text background=”danger”> […] </text>
    • http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/text
  • Thumbnails 缩略图 分栏显示内容
    • 配和网格grid 使用 <grid>
    • <col xs=”6″ md=”3″> <thumbnail> {{ wiki:dokuwiki-128.png }} <caption>
    • xs=6 使用没什么用处,我们分4列,所以md=3.
    • http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/thumbnail
  • Tooltips
    • 鼠标移动即可显示注释内容
    • <tooltip title=”Sample Text” location=”bottom”>Lorem ipsum</tooltip> dolor sit amet…
  • Wells
    • 填充背景的文本栏
    • <well>Look, I’m in a well!</well>
    • <well size=”sm”>Look, I’m in a small well!小的</well>
    • <well size=”lg”>Look, I’m in a large well!大的</well>

发表评论

电子邮件地址不会被公开。 必填项已用*标注