jade,Code片段,代码实例,代码示例,代码片段库

jade 特点：水平光

水平灯光功能

features-horizontal-light.jade

    .jumbotron.subhead.jumbotron--chl-light
        .container.text-center
            h2 Meet the Team
            p Proin lobortis posuere iaculis. Sed eu ipsum ut dui dignissim varius. Aliquam dapibus est vitae nibh dapibus, at aliquet neque ullamcorper.
            button.btn.btn-alt1 Feature button goes here

jade 特点：水平暗

水平暗特征

features-horizontal-dark.jade

    .jumbotron.subhead.jumbotron--chl-default
        .container.text-center
            h2 Meet the Team TEST
            p Proin lobortis posuere iaculis. Sed eu ipsum ut dui dignissim varius. Aliquam dapibus est vitae nibh dapibus, at aliquet neque ullamcorper.
            button.btn.btn-outline Feature button goes here

jade 标题：页面用子头划分文本标题

页面划分文本标题与子头

header-page-divider-sub-head.jade

        h2.divider-head H2 Header
            small.divider-head__sub-head Secondary Text

jade 标题：内部页面灯带图标

轻型内部页面标题与背景建筑和中心图标

header-internal-light-icon.jade

    // Change the icon term for other options: pen, phone, wallet, certificate, trophy, calculator, framed-home, clipboard, badge
    header.jumbotron.subhead.chl-header.chl-header--internal-page-light-withicon.chl-header--internal-page-light-withicon--pen
        .container                                                                  
            .header-abstract        
                .feature-icon 
                h1 Header Goes Here
                p.lead Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, eius, deleniti voluptatibus iusto voluptates ex eum incidunt sed rerum suscipit distinctio autem consequuntur in quod omnis explicabo sit qui quidem.

jade 标题：带有面包屑的内部页面灯

轻的内部页面标题与背景建筑物和面包屑

header-internal-light-breadcrumbs.jade

    header.jumbotron.subhead.chl-header.chl-header--internal-page-light
        .container
            ol.breadcrumb
                li
                    a(href="#") Home
                li
                    a(href="#") Page
                li.active
                    a(href="#") Page                                                
            h1 Header Goes Here
            p.lead Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, eius, deleniti voluptatibus iusto voluptates ex eum incidunt sed rerum suscipit distinctio autem consequuntur in quod omnis explicabo sit qui quidem.

jade 标题：带有面包屑的内页黑暗

黑暗的内部标题与背景建筑和面包屑

header-internal-dark-breadcrumbs.jade

    header.jumbotron.subhead.chl-header.chl-header--internal-page
        .container
            ol.breadcrumb
                li
                    a(href="#") Home
                li
                    a(href="#") Page
                li.active
                    a(href="#") Page                                                
            h1 Header Goes Here
            p.lead Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, eius, deleniti voluptatibus iusto voluptates ex eum incidunt sed rerum suscipit distinctio autem consequuntur in quod omnis explicabo sit qui quidem.

jade 标题：内部页面光

轻的内部页面标题与背景建筑物

header-internal-light.jade

    header.jumbotron.subhead.chl-header.chl-header--internal-page-light
        .container                         
            h1 Header Goes Here
            p.lead Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, eius, deleniti voluptatibus iusto voluptates ex eum incidunt sed rerum suscipit distinctio autem consequuntur in quod omnis explicabo sit qui quidem.

jade 标题：内页黑暗

黑暗的内部页面标题与背景建筑物

header-internal-dark.jade

    header.jumbotron.subhead.chl-header.chl-header--internal-page
        .container                         
            h1 Header Goes Here
            p.lead Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, eius, deleniti voluptatibus iusto voluptates ex eum incidunt sed rerum suscipit distinctio autem consequuntur in quod omnis explicabo sit qui quidem.

jade 标题：主页光

与家庭背景的轻的主页倒栽跳水

header-light.jade

    header.jumbotron.subhead.chl-header.chl-header--home-page-light
        .container
            h1 Header Goes Here
            p.lead Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos asperiores delectus vero voluptatem corporis minus ipsum similique amet, quas incidunt magni enim soluta expedita consequatur ipsa officia nesciunt consectetur quasi.
            p Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo officiis dolorem consequuntur consequatur qui voluptas, corrupti expedita. 
                a(href="#") link goes here
                |.

jade 标题：主页黑暗

黑暗的主页页面与背景家园

dark-header.jade

    header.jumbotron.subhead.chl-header.chl-header--home-page
        .container
            h1 Header Goes Here
            p.lead Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos asperiores delectus vero voluptatem corporis minus ipsum similique amet, quas incidunt magni enim soluta expedita consequatur ipsa officia nesciunt consectetur quasi.
            p Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo officiis dolorem consequuntur consequatur qui voluptas, corrupti expedita. 
                a(href="#") link goes here
                |.