Axure实现bootstrap首页线框图

W240第二天——bootstrap线框图

Axure的简单使用:

bootstrap导航栏

  • 详情设计见导航栏

bootstrap首页banner

Axure实现bootstrap首页线框图_第1张图片

Axure实现bootstrap首页线框图_第2张图片

注:

  • 谷歌浏览器最小字号12像素
  • 按钮、链接等需额外矩形框进行框选住
    在这里插入图片描述

bootstrap元件列表

Axure实现bootstrap首页线框图_第3张图片

Axure实现bootstrap首页线框图_第4张图片
注:

  • 注意右下角概要页面中进行组合打包
    在这里插入图片描述

Axure实现bootstrap首页线框图_第5张图片
打包选中时,按住shift选中第一个和最后一个自动选中中间所有。

  • 母版的创建和使用:
    Axure实现bootstrap首页线框图_第6张图片
    在这里插入图片描述
    双击右下角母版元件可进行统一编辑,模板改变所有模板改变,创建母版后按住ctrl鼠标左键拖动创建其他母版。
  • 排版:
    Axure实现bootstrap首页线框图_第7张图片
    第一个和最后一个元素固定位置后中间自动水平分布。

bootstrap底部

Axure实现bootstrap首页线框图_第8张图片

Axure实现bootstrap首页线框图_第9张图片
注:

  • 底部动态面板设置高度h:2,背景色黑色,100%宽度,形成底部铺满宽度的水平线。
    在这里插入图片描述

整体效果

Axure实现bootstrap首页线框图_第10张图片

你可能感兴趣的:(web,w240,Super,ITZ,bootstrap,Axure,线框图,css)