Bootstrap从psd文件到html

响应式设计

无边栏设计

section.section-main>.inner-center  

Bootstrap,比例统筹

参考资料

代码规范

定点宽度设计

.inner-center{
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

具有宽度皆以像素为单位,那种布局最便利,适用于有些我内容相比少的页面。
任凭浏览器窗口多大,它们的尺码总是不变,不能丰盛利用可用空间。此时得以采纳

min-width: 980px 

配合min-width的运用,页面部分情节如三栏布局可以接纳百分比来安装宽度(流式布局),实现当浏览器窗口宽度小于设计稿宽度时,允许现身横向滚动条,页面内容宽度保持不变,可是当浏览器窗口宽度大于设计稿宽度时,页面内容的宽度保持和浏览器窗口宽度一致

特定需求

section-main

完整布局

Bootstrap 1

  • page-content
    • header
    • section-feature(可增/删)
    • section-main
    • section-postscript(可增/删)
    • footer
  • 公家部分
    • inner-center

实施应用

  • 通过抬高前缀修饰关键词

    public-header,article-header,index-banner,index-panel
    
  • 通过层级关系非凡化类,一般子元素接着父元素的结尾一个单词(继承式)

    ul.card-list 
        li.list-item 
            a.item-img-link>img.item-img 
            h3.item-tt>a.item-tt-link 
            p.item-text
    <ul>
         <li> 
            <a href="#"><img src="" alt="Bootstrap 2"></a> 
            <h3><a href="#"></a></h3> 
            <p></p> 
        </li> 
    </ul>
    

纲要

  • 计划布局,划分全体结构
  • 情节区域,从总体到有的,局部中的通用部分,遵照上下文应用样式
    • 公物头部(public-header)、尾部(public-footer)
    • 集体容器(public-container/inner-center)
  • css文件,html结构,多考虑
    • 不用让内联元素与块级元素处于同一级别下,如a标签与div标签
    • reset.css、common.css、index.css
    • 内需变更的因素,父元素统统举办清理,给予统一的类clearfix
    • 宽中度:使用偶数单位。
  • 了不起的代码规范和命名
    • 不超过三级命名
  • 巧妙属性和要素配合,还有没有更好的方案

    • 灵活overflow,针对有些图形、文字超出隐藏的事态。
    • text-overflow,超出的文字部分,省略号显示。
    • a标签可以嵌套任何p,h,div等标签(依据新的正规化)一般见于一致组标题、图片文字组合等链接同一个地方的,那么大一块地方都需要链接样式去跳转,那样做相比较便利。

      <a href="#" class="title">
          <h4>Voluptate cillum fugiat.</h4>
          <p class="comment">Cheese, tomato, mushrooms, onions.</p>
      </a>
      
  • 非凡和细节的拍卖(放大100%以上,才能收看端倪)

    • 反思HTML结构是否创造
      • 调节错误的时候,让错误的视觉效果极大化,更易于看到问题。
    • css Hack处理

or

  • page-content
    • header
    • section-feature(可增/删)
    • section-name-1
    • section-name-2
    • footer
  • 公家部分
    • inner-center/public-container

双面栏设计

section.section-main>.inner-center
    aside.aside-left
    main.main>.content
    aside.aside-right

预定规则

  • 重在词间以中写道-连接 以中写道连接,如.item-img
  • 使用多少个中划线表示特殊化,如.item-img.item-img–small表示在.item-img的根基上特殊化
  • 气象类直接运用单词,参考下面的最紧要词,如.active, .checked
  • 图标以icon-为前缀(字体图标选择.icon-font.i-name模式命名),详情应用见CSS
    Icons
    ,可以下载参考Bootstrap的图标语义命名。
  • 模块采纳关键词命名,如.slide, .modal, .tips,
    .tabs,特殊化接纳地方多少个中划线表示,如.imgslide–full, .modal–pay,
    .tips–up, .tabs–simple
  • js操作的类统红米上js-前缀
  • 毫不超越六个class组合使用,如.a.b.c.d
  • 一个类名,不要超过六个单词的连日。
  • 主导布局命名前增长该页的命名,如index-banner,index-main。

取名约定与应用

左手栏设计

section.section-main>.inner-center
    aside.aside-left
    main.main>.content

常见class关键词

  • 布局类:header, footer, container, main, content, aside, page,
    section
  • 包裹类:wrap, inner
  • 区块类:region, block, box
  • 结构类:hd, bd, ft, top, bottom, left, right, middle, col, row,
    grid, span
  • 列表类:list, item, field
  • 主次类:primary, secondary, sub, minor
  • 大小类:s, m, l, xl, large, small
  • 状态类:active, current, checked, hover, fail, success, warn, error,
    on, off
  • 导航类:nav, prev,
    next,
    breadcrumb,
    forward, back, indicator, paging, first, last
  • 交互类:tips, alert, modal, pop(弹出层), panel,
    tabs,
    accordion,
    slide,error –scroll, overlay,
  • 星级类:rate, star
  • 分割类:group, seperate, divider
  • 等分类:full, half, third, quarter
  • 表格类:table, tr, td, cell, row
  • 图片类:img, thumbnail, original, album,
    gallery
  • 语言类:cn, en
  • 论坛类:forum, bbs, topic, post
  • 方向类:up, down, left, right
  • 其他语义类:btn, close, ok, cancel, switch; link, title, info,
    intro, more, icon; form, label, search, contact, phone, date, email,
    user, login, register, join, del, add, confirm;message, tab,
    current, note,guide, service, hot, news, download, vote, partner,
    copyright, demo, summary, pages, themes, set, blog, photo,
    guestbook, global; view, status, loading…
  • 对于命名的具体行使,可以查看W3school

  • 图形命名与图标命名,index-header-logo,index-footer-logo.

相关文章