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

jade 面板：蓝色标题

带蓝色标题的面板

panels-blue-header.jade

        .panel.panel-default.chl-default-panel
            .panel-heading
                h3.panel-title.chl-default-panel__header Panel title
            .panel-body.chl-default-panel__body
                h4.chl-default-panel__sub-head.chl-default-panel__sub-head--phone Panel heading
                p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione cumque vel nihil nemo quasi possimus voluptas, officia, error adipisci assumenda eligendi, blanditiis esse molestias optio magni temporibus quisquam minima sint.
                h4.chl-default-panel__sub-head.chl-default-panel__sub-head--email Panel heading
                p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione cumque vel nihil nemo quasi possimus voluptas, officia, error adipisci assumenda eligendi, blanditiis esse molestias optio magni temporibus quisquam minima sint.
                button.btn.btn-alt1 Great Button
                h4.chl-default-panel__sub-head.chl-default-panel__sub-head--contact Panel heading
                ul
                    li 
                        a(href="#") 
                            .fa.url 
                            | link 1 <code>url</code>
                    li
                        a(href="#")
                            .fa.email
                            | link 2 <code>email</code>
                    li 
                        a(href="#") 
                            .fa.phone
                            | link 3 <code>phone</code>
                    li 
                        a(href="#")
                            .fa.vimeo
                            | link 4 <code>vimeo</code>
                    li 
                        a(href="#")
                            .fa.video
                            | link 5 <code>video</code>
                    li 
                        a(href="#")
                            .fa.audio
                            | link 6 <code>audio</code>

jade 表：黄色条纹

黄色条纹的表

tables-striped-yellow.jade

        table.table.table-striped-chl.table-striped-chl--yellow.table-striped-chl--yellow-header
            thead
                tr
                    th # 
                    th First Name
                    th Last Name
                    th Username
            tbody
                tr
                    td 1
                    td Mark
                    td Otto
                    td @mdo
                tr
                    td 2
                    td Jacob
                    td Thornton
                    td @fat
                tr
                    td 3
                    td Larry
                    td the Bird
                    td @twitter

jade 表：绿色条纹

绿色条纹表

tables-striped-green.jade

        table.table.table-striped-chl.table-striped-chl--green.table-striped-chl--green-header
            thead
                tr
                    th # 
                    th First Name
                    th Last Name
                    th Username
            tbody
                tr
                    td 1
                    td Mark
                    td Otto
                    td @mdo
                tr
                    td 2
                    td Jacob
                    td Thornton
                    td @fat
                tr
                    td 3
                    td Larry
                    td the Bird
                    td @twitter

jade 表：蓝色条纹

蓝色条纹表

tables-striped-blue.jade

        table.table.table-striped-chl.table-striped-chl--blue
            thead
                tr
                    th # 
                    th First Name
                    th Last Name
                    th Username
            tbody
                tr
                    td 1
                    td Mark
                    td Otto
                    td @mdo
                tr
                    td 2
                    td Jacob
                    td Thornton
                    td @fat
                tr
                    td 3
                    td Larry
                    td the Bird
                    td @twitter

jade 表：黄色标题

带黄色标头的标准表

tables-yellow-header.jade

        table.table.table-chl--yellow-header
            thead
                tr
                    th # 
                    th First Name
                    th Last Name
                    th Username
            tbody
                tr
                    td 1
                    td Mark
                    td Otto
                    td @mdo
                tr
                    td 2
                    td Jacob
                    td Thornton
                    td @fat
                tr
                    td 3
                    td Larry
                    td the Bird
                    td @twitter

jade 表：绿色标题

带绿色标头的标准表

tables-green-header.jade

        table.table.table-chl--green-header
            thead
                tr
                    th # 
                    th First Name
                    th Last Name
                    th Username
            tbody
                tr
                    td 1
                    td Mark
                    td Otto
                    td @mdo
                tr
                    td 2
                    td Jacob
                    td Thornton
                    td @fat
                tr
                    td 3
                    td Larry
                    td the Bird
                    td @twitter

jade 表：蓝色标题

带蓝色标头的标准表

tables-blue-header.jade

        table.table.table-chl--blue-header
            thead
                tr
                    th # 
                    th First Name
                    th Last Name
                    th Username
            tbody
                tr
                    td 1
                    td Mark
                    td Otto
                    td @mdo
                tr
                    td 2
                    td Jacob
                    td Thornton
                    td @fat
                tr
                    td 3
                    td Larry
                    td the Bird
                    td @twitter

jade 特点：垂直与背景渐变和图标

垂直功能与背景渐变和图标

features-vertical-background-gradient-icon.jade

        // Change the icon term for other options: calendar, wallet, celebrate
        .panel.panel-default.chl-panel-highlight.chl-panel-highlight--calendar                
            h3 
                .highlight-icon 
                | Header Goes Here
            p Aenean pretium interdum nulla, nec accumsan sem bibendum quis. Pellentesque congue eget urna sit amet elementum. Praesent finibus libero a dapibus commodo. Sed quis suscipit odio. Donec arcu ante, auctor sit amet libero a, venenatis pulvinar massa.
            h4 Sub Header Goes Here
            p Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam quo delectus ipsa, consequuntur reprehenderit illum facilis nisi eum tenetur quisquam.

jade 特点：垂直与背景颜色

垂直面板功能与背景颜色

features-vertical-background-color.jade

        .panel.panel-default.chl-panel.chl-panel--secondary4-bg
            .panel-body
                h3 Header Goes Here
                p Maecenas nisi nisl, fringilla at venenatis at, sagittis ac turpis. Aliquam commodo sem neque, sit amet hendrerit mauris accumsan et. Vivamus nec felis sed eros laoreet viverra. Donec tristique pulvinar nisi eget lacinia. Integer vestibulum nibh vel ipsum sollicitudin rhoncus. Donec mollis luctus orci.
                a(href="programs.html") Find out more about Premier Access

jade 特点：垂直与黑色标头

具有黑色标题的垂直特征

features-vertical-dark-header.jade

        .panel.panel-default.chl-panel.chl-panel--primary-header
            .panel-heading
                | Header Goes Here
            .panel-body
                ul.check-list
                    li Vivamus dignissim nec nisi quis venenatis. Nulla varius
                    li Cras volutpat neque nec nunc placerat condimentum
                    li Morbi fermentum, ligula venenatis condimentum dictum, metus mauris
                    li Ornare risus, at mattis justo lacus nec ligula. Nulla nec metus nec
                    li Etiam consectetur at orci non fermentum. Morbi elementum
                a.btn.btn-alt1.btn-block(href="programs.html") Wholesale Details