版权声明

  • 北京海融惠达网络科技有限公司

    海融网声明:凡本网注明“来源:海融网”的作品或图片,版权均属于海融网。海融网与作品作者联合声明,任何组织、机构未经海融网书面授权不得转载、摘编或利用其它方式使用上述作品。凡本网注明来源非海融网的作品,均转载自其它媒体或合作单位,转载目的在于更好服务用户和读者、传递信息之需,并不代表本网赞同其观点,本网亦不对其真实性负责,持异议者应与原始出处或信源主张权利。特别提醒:本网刊发或转载涉及资本市场或上市公司文章不构成任何投资建议,投资者据此操作,风险自担!

  • Card

    Create layout boxes with different styles.

    Usage :

    By default, a card is blank. That is why it is important to add a modifier class for styling. In our example we are using the .uk-card-default class.

    PREVIEW

    Default

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Style modifiers

    UIkit includes a number of modifiers that can be used to add a specific style to cards.
    .uk-card-default .uk-card-primary .uk-card-secondary or you can use Background compounents . and .uk-light

    PREVIEW

    Default

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Primary

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Secondary

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Default

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Default

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Default

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Hover modifier

    To create a hover effect on the card, add the .uk-card-hover class. This comes in handy when working with anchors and can be combined with the other card modifiers.

    PREVIEW

    Hover

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Default

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Primary

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Secondary

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Size modifier

    You can apply different size modifiers to cards that will decrease or increase their padding.

    PREVIEW

    Small

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Large

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    You can also divide a card into header and footer — around the default body. Just add the .uk-card-header or .uk-card-footer class to a <div> element inside the card.

    PREVIEW

    Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Media modifiers.

    To display an image inside a card without any spacing, add one of the following classes to a <div> around the <img> element. Mind that you need to modify the source order accordingly.

    PREVIEW

    Media Top

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Media Bottom

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Horizontal alignment

    PREVIEW

    Media Left

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Media Right

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • Background

    A collection of utility classes to add different backgrounds to elements.

    Uikit backgrounds

    To apply a background color to an element, add one of the following classes. The actual color for each modifier is defined by the UIkit style that you have chosen or customized.

    .uk-background-default .uk-background-muted .uk-background-primary .uk-background-secondary


    Default

    Muted

    Primary

    Secondary

    Theme backgrounds

    To apply a background color to an element, add one of the following classes :
    .bg-White .bg-primary .bg-Danger .bg-success .bg-Warning .bg-info .bg-grey .bg-Dark



    White

    Primary

    Danger

    Success

    Warning

    Info

    Grey

    Dark

    Light

    Note To change the text inside the element to light use this class uk-light.

    Theme soft backgrounds

    To apply a background color to an element, add one of the following classes :
    .bg-soft-primary .bg-soft-Danger .bg-soft-success .bg-soft-Warning .bg-soft-info .bg-soft-grey .bg-soft-Dark



    White

    Primary

    Danger

    Success

    Warning

    Info

    Dark

    Gradient backgrounds

    To apply a background color to an element, add one of the following classes :
    .bg-gradient-primary .bg-gradient-Danger .bg-gradient-success .bg-gradient-Warning .bg-gradient-info .bg-gradient-grey .bg-gradient-dark .bg-gradient-light



    Primary

    Danger

    Success

    Warning

    Info

    Dark

    Grey

    Light

    Text Colors


    .uk-text-muted .uk-text-emphasis .uk-text-primar .uk-text-secondary .uk-text-success .uk-text-warning .uk-text-info
  • Flex

    Utilize the power of flexbox to create a wide range of layouts.

    To apply the flexbox layout modal, use one of the following classes. By default, all flex items are aligned to the left, as wide as their content and matched in height.

    PREVIEW
    Item 1
    Item 2
    Item 3

    Horizontal alignment

    These classes define the horizontal alignment of flex items and distribute the space between them. Add one or more of them to the flex container in order to configure the alignments of the flex items. By default, flex items are aligned to the left as does the class.

    PREVIEW
    Class Description
    .uk-flex-left Add this class to align flex items to the left.
    .uk-flex-center Add this class to center flex items along the main axis.
    .uk-flex-right Add this class to align flex items to the right.
    .uk-flex-between Add this class to distribute items evenly, with equal space between the items along the main axis.
    .uk-flex-around Add this class to distribute items evenly with equal space on both sides of each item.
    Item 1
    Item 2
    Item 3

    Vertical alignment

    These classes define the vertical alignment of flex items. By default, flex items fill the height of their container as does the .uk-flex-stretch class.

    PREVIEW
    Class Description
    .uk-flex-stretch Add this class to expand flex items to fill the height of their parent.
    .uk-flex-top Add this class to align flex items to the top.
    .uk-flex-middle Add this class to center flex items along the cross axis.
    .uk-flex-bottom Add this class to align flex items to the bottom.
    Item 1
    Item 2
    ...
    Item 3
    ...
    ...

    Flex and grid

    The Flex component can be combined with a grid from the Grid component.

    PREVIEW

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

    Image

    Direction modifiers

    These classes define the axis that flex items are placed on and their direction. By default, items run horizontally from left to right as does the .uk-flex-row class.

    PREVIEW
    Class Description
    .uk-flex-row Add this class to lay out flex items as horizontal rows.
    .uk-flex-row-reverse Add this class to lay out flex items from right to left.
    .uk-flex-column Add this class to lay out flex items as vertical columns.
    .uk-flex-column-reverse Add this class to lay out flex items from bottom to top.
    Item 1
    Item 2
    Item 3
  • Form

    Easily create nice looking forms with different styles and layouts.

    Add one of the following classes to form controls inside a

    element to define them.

    Class Description
    .uk-input Add this class to <input> elements.
    .uk-select Add this class to <select> elements.
    .uk-textarea Add this class to <textarea> elements.
    .uk-radio Add this class to <input type="radio"> elements to create radio buttons.
    .uk-checkbox Add this class to <input type="checkbox"> elements to create checkboxes.
    .uk-range Add this class to <input type="range"> elements to create range forms.
    Legend

    States modifiers

    Add one of the classes to an <input>, <select> or <textarea> element to modify its size.

    Class Description
    .uk-form-danger Add this class to notify the user that the value is not validated.
    .uk-form-success Add this class to notify the user that the value is validated.

    Size modifiers

    Provide the user with basic information through feedback states on form controls by using one of the following classes.


    Class Description
    .uk-form-large Add this class to make the element larger.
    .uk-form-small Add this class to make the element smaller.

    Width modifiers

    Provide the user with basic information through feedback states on form controls by using one of the following classes.

    Class Description
    .uk-form-width-large Applies a width of 500px.
    .uk-form-width-medium Applies a width of 200px.
    .uk-form-width-small Applies a width of 130px.
    .uk-form-width-xsmall Applies a width of 40px.

    Horizontal form

    Use the .uk-form-controls-text class to better align checkboxes and radio buttons when using them with text in a horizontal layout.

    Radio

    Form and icons

    The icon has to come first in the markup. By default, the icon will be placed on the left side of the form. To change the alignment, add the .uk-form-icon-flip class.


    Clickable icons

    To enable an action, for example opening a modal to pick an image or link, use an <a> or <button> element to create the icon.


    Form and grid

    You can also use the Grid components to define the layout of a form.


    Custom controls

    To replace a file inputs or select forms with your own HTML content, like a button or text, add the uk-form-custom attribute to a container element.


    Here is a text
    upload