blogs

blogs

05.292017
1 0
Zurb Foundation – Controls

Zurb Foundation – Controls

Controls

Foundation provides the following controls-

  1. Button
  2. Button Group
  3. Close Button
  4. Slider
  5. Switch

Button - Foundation supports many button styles those can be customized as per our needs.

Buttons can be created using simple <a> tag or <button> tag or we can just use .button class.

image3

Output –

image1

Button Color – Foundation provides some standard color classes but we can customize this as per our needs. There are following button colors-

Primary, secondary, success, alert, warning

image8

Output –

image5

Button Sizing – We can customize button size, Foundation provides following classes for button sizing.

Tiny, small, large, expanded

image7

Output –

image15

Addition Classes supported by Button in Foundation-

.disabled – This will make a button disable.

image6

Output –

image2

.hollow – By using this class we can make a hollow button.

image9

Output –

image4 (1)

.dropdown – We can create a dropdown button using this class.

image11

Output –

image10

Button Group

Button group is used to create a collection of buttons, in this group all the created buttons separated by a small separator.

image13

Output –

image12

Stacking – a group of vertically arranged buttons can be created by using the class .stacked

image14

Output –

image16

Reference –

Leave a Reply

Your email address will not be published. Required fields are marked *