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

jade 提示

Появлениетултипанаховерпоэлементубезjs

style.styl

.tooltip
	+below(1200px)
		display: none
	display:inline-block
	position:relative
	text-align:left
	cp()
	margin: 0 5px
	.icon
		size 16px
	&:hover
		.top
			visibility:visible
			opacity:1
	.top
		min-width:240px
		top:-10px
		left:50%
		transform:translate(-50%, -100%)
		padding:10px 20px
		background-color:#EEEEEE
		position:absolute
		z-index:99999999
		box-sizing:border-box
		visibility:hidden
		opacity:0
		transition:opacity 0.8s
		@extend .type--main
		font-weight 400
		line-height: 1.6
		font-size: 12px
		i
			position:absolute
			top:100%
			left:50%
			margin-left:-12px
			width:24px
			height:12px
			overflow:hidden
			&:after
				content:''
				position:absolute
				width:12px
				height:12px
				left:50%
				transform:translate(-50%,-50%) rotate(45deg)
				background-color:#EEEEEE
				box-shadow:0 10px 15px rgba(0, 0, 0, 0.09)

index.pug

.tooltip
	+icon("info","icon") 
	.top
		i
		| Lorem ipsum dolor sit amet, consectetur

jade 导航：带有实用程序链接的子站点

使用实用程序链接的子站点导航

navigation-sub-site-utility-links.jade

        header
            nav.chl-sub-brand-header
                .container-fluid
                    .container(style="width: 100%")
                        .chl-nav-util-icons.chl-nav-util-icons--sub-brand.pull-left
                            ul
                                li 
                                    a(href="#")
                                        .fa.fa-search 
                                        span Search   
                        .chl-nav-util-icons.chl-nav-util-icons--sub-brand.pull-right
                            ul
                                li
                                    a(href="#")
                                        .fa.fa-user-circle 
                                        span My Caliber
                                li 
                                    a(href="#")
                                        .fa.fa-phone 
                                        span Contact
                                li 
                                    a(href="#")
                                        .fa.fa-th 
                                        span Sites                                  
                        .caliber-logo                                                    
            #nav-wrapper        
                nav.navbar.navbar-inverse.main-nav-header
                    .container-fluid
                        .container
                            .navbar-header
                                button.collapsed.navbar-toggle(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-9', aria-expanded='false')
                                    span.sr-only Toggle navigation
                                    span.icon-bar
                                    span.icon-bar
                                    span.icon-bar
                                a.navbar-brand(href='index.html') 
                                    i.fa.fa-home 
                                    | Sub Site 
                            #bs-example-navbar-collapse-9.collapse.navbar-collapse
                                ul.nav.navbar-nav
                                    li
                                        a(href='#') Link          
                                    li
                                        a(href='#') Link
                                    li
                                        a(href='#') Link
                                    li.dropdown(class=(section === 'dropdown') ? 'active' : '')
                                        a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-haspopup='true', aria-expanded='false') Dropdown
                                            span.caret
                                        ul.dropdown-menu
                                            li(class=(section === 'linktext1') ? 'active' : '') 
                                                a(href='#') Link Text              
                                            li(class=(section === 'linktext2') ? 'active' : '')
                                                a(href='#') Link Text

jade 导航：企业与实用工具链接

公用导航与实用链接

navigation-corporate-utility-links.jade

        header
            nav.chl-corp-brand-header
                .container-fluid
                    .container(style="width: 100%")
                        .chl-nav-util-icons.pull-left
                            ul
                                li 
                                    a(href="#")
                                        .fa.fa-search 
                                        span Search   
                        .chl-nav-util-icons.pull-right
                            ul
                                li
                                    a(href="#")
                                        .fa.fa-user-circle 
                                        span My Caliber
                                li 
                                    a(href="#")
                                        .fa.fa-phone 
                                        span Contact
                                li 
                                    a(href="#")
                                        .fa.fa-th 
                                        span Sites                                  
                        .caliber-logo
            #nav-wrapper        
                nav.navbar.navbar-inverse.main-nav-header
                    .container-fluid
                        .container
                            .navbar-header
                                button.collapsed.navbar-toggle(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-9', aria-expanded='false')
                                    span.sr-only Toggle navigation
                                    span.icon-bar
                                    span.icon-bar
                                    span.icon-bar
                                a.navbar-brand(href='index.html') 
                                    i.fa.fa-home 
                                    | Corporate 
                            #bs-example-navbar-collapse-9.collapse.navbar-collapse
                                ul.nav.navbar-nav
                                    li
                                        a(href='#') Link          
                                    li
                                        a(href='#') Link
                                    li
                                        a(href='#') Link

jade 导航：子站点

公司以外站点的主要导航

navigation-sub-site.jade

        header
            nav.chl-sub-brand-header
                .container-fluid
                    .container(style="width: 100%")
                        .caliber-logo                            
            #nav-wrapper        
                nav.navbar.navbar-inverse.main-nav-header
                    .container-fluid
                        .container
                            .navbar-header
                                button.collapsed.navbar-toggle(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-9', aria-expanded='false')
                                    span.sr-only Toggle navigation
                                    span.icon-bar
                                    span.icon-bar
                                    span.icon-bar
                                a.navbar-brand(href='index.html') 
                                    i.fa.fa-home 
                                    | Sub Site 
                            #bs-example-navbar-collapse-9.collapse.navbar-collapse
                                ul.nav.navbar-nav
                                    li
                                        a(href='#') Link          
                                    li
                                        a(href='#') Link
                                    li
                                        a(href='#') Link

jade 导航：企业主导航

公司网站的主要导航

navigation-corporate.jade

        header
            nav.chl-corp-brand-header
                .container-fluid
                    .container(style="width: 100%")
                        .caliber-logo                            
            #nav-wrapper        
                nav.navbar.navbar-inverse.main-nav-header
                    .container-fluid
                        .container
                            .navbar-header
                                button.collapsed.navbar-toggle(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-9', aria-expanded='false')
                                    span.sr-only Toggle navigation
                                    span.icon-bar
                                    span.icon-bar
                                    span.icon-bar
                                a.navbar-brand(href='index.html') 
                                    i.fa.fa-home 
                                    | Corporate 
                            #bs-example-navbar-collapse-9.collapse.navbar-collapse
                                ul.nav.navbar-nav
                                    li
                                        a(href='#') Link          
                                    li
                                        a(href='#') Link
                                    li
                                        a(href='#') Link

jade 导航：页脚

基本页脚

navigation-footer.jade

        footer
            nav.chl-footer
                .container-fluid
                    .container
                        .caliber-logo
                        ul.chl-footer__main-nav-links
                            li 
                                a(href="#") Link
                            li 
                                a(href="#") Link
                            li
                                a(href='#') Link                        
                            li 
                                a(href="#") Link
            nav.chl-footer-utils
                .container-fluid
                    .container.chl-footer__copyright
                        p &copy; #Year# Caliber Home Loans, Inc. All Rights Reserved. NMLS#15622
                        ul.list-inline.chl-footer__util-nav-links
                            li 
                                a(href="https://caliberhomeloans.com/tools-resources/legal/security") Security
                            li 
                                a(href="https://caliberhomeloans.com/tools-resources/legal/terms-of-use") Terms of Use
                            li 
                                a(href="https://caliberhomeloans.com/tools-resources/legal/privacy-policy") Privacy Policy
                            li 
                                a(href="https://caliberhomeloans.com/tools-resources/legal/terms-of-use#Licensing") Licensing
                            li 
                                a(href="https://caliberhomeloans.com/tools-resources/legal/texas-mortgage-banker-disclosure") Texas Mortgage Banker Disclosure
                            li 
                                a(href="http://www.nmlsconsumeraccess.org/EntityDetails.aspx/COMPANY/15622") NMLS Consumer Access

jade 列表：检查标记列表

用图标检查标记列表

lists-check-mark.jade

        ul.check-list
            li Full agency lender - wholesale and non-delegated correspondent - built to perform in a purchase market
            li Nunc id rhoncus ante. Nullam eget diam ut purus volutpat tempus vel et sapien. Nullam id lorem vitae urna viverra ullamcorper ut non risus. Aliquam erat volutpat. Vestibulum eu lacinia sem. Nulla volutpat suscipit est, et pharetra dolor faucibus a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            li List item 3

jade 其他：Blockquote反馈

Blockquote反馈

misc-blockquote-feedback.jade

        blockquote
            p Maecenas sed tellus ullamcorper, luctus lacus ac, viverra mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed tellus ullamcorper, luctus lacus ac, viverra mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed tellus ullamcorper, luctus lacus ac, viverra mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed tellus ullamcorper, luctus lacus ac, viverra mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            footer.blockquote-author 
                .profile-icon
                .profile-name John Doe

jade 列表：在深色背景上检查标记

白色复选标记列表用于深色背景

lists-check-mark-dark-background.jade

            ul.check-list--on-dark-bg
                li Full agency lender - wholesale and non-delegated correspondent - built to perform in a purchase market
                li Nunc id rhoncus ante. Nullam eget diam ut purus volutpat tempus vel et sapien. Nullam id lorem vitae urna viverra ullamcorper ut non risus. Aliquam erat volutpat. Vestibulum eu lacinia sem. Nulla volutpat suscipit est, et pharetra dolor faucibus a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                li List item 3

jade 面板：绿色标题

带绿色标题的面板

panels-green-header.jade

        .panel.panel-default.chl-default-panel
            .panel-heading
                h3.panel-title.chl-default-panel__header--alt1 Panel title
            .panel-body.chl-default-panel__body
                h4.chl-default-panel__sub-head.chl-default-panel__sub-head--alt1 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.