2421030511 Ελ. Βενιζέλου 43, Βόλος site@4ty.gr

Δημιουργούμε έναν πίνακα και στην κλάσση γράφουμε "tabs". Δημιουργούμε δύο rows για κάθε tab που θέλουμε να έχουμε. Το ένα το κάνουμε header (από τα properties του κελιού) και μέσα γράφουμε τον τίτλο που θέλουμε να έχει το tab.

Ο τίτλος θα πρέπει να είναι link. Στο πεδίο URL θα πρέπει να γράψουμε δίεση (#) και το όνομα που θέλουμε να δώσουμε στο συγκεκριμένο tab. Αυτό το όνομα δεν θα φαίνεται στα τελικά tabs αλλά είναι κάτι που χρειάζεται ο κώδικας για να δουλέψει σωστά. Το όνομα θα πρέπει να είναι μοναδικό, γραμμένο με λατινικούς χαρακτήρες και χωρίς κενά. Για παράδειγμα: #tab1

Αν δεν θέλουμε να κάνουμε τον τίτλο link, τότε ο πίνακάς μας θα πρέπει να έχει id (το ορίζουμε μέσα από τα properties του πίνακα) και επίσης ο τίτλος δεν πρέπει να πριέχει αυτούς τους χαρακτήρες (. , / " ' + | % ( ) { } [ ] ! ` ~). Επίσης σε αυτήν την περίπτωση δεν μπορούμε να βάλουμε εικόνα - εικονίδιο ή να αλλάξουμε τη γραμματοσειρά ή το στυλ της.

Στο επόμενο row βάζουμε το περιεχόμενο που θέλουμε να έχει το tab. 

Τα tabs μπορούν να έχουν τα εξής στυλ:

Στυλ

Κλάσση

Απλό

tabs

Με γραμμή όταν επιλέγονται

tabs border

Με γέμισμα

tabs fill

Επίσης μπορούμε να δηλώσουμε και χρώματα

red, green, blue, orange, purple, turquoise, grey, golden

Κάθετα (αριστερά - δεξιά)

vertical + left ή right

Tabs στο κέντρο ή στα δεξιά

tabs-center ή tabs-right

Μέγεθος των tabs. Να πιάνουν το 100%. jystify

 

 tabs 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 3

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 

 

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

 

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

 

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 

 

 tabs border 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 3

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 

 

 tabs border red 

 red, green, blue, orange, purple, turquoise 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 2

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.



 

 tabs fill turquoise 

 red, green, blue, orange, purple, turquoise, grey 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 2

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 


 

 tabs classic 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 2

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 


 

 tabs fill orange vertical 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 2

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 

 


 

 tabs border vertical right 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 2

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 

 


 

 tabs classic vertical left 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 3

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 


 

 tabs classic vertical right 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 2

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 


 

 tabs border red tabs-center 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 3

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 

 


 

 tabs border red tabs-right 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 3

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 

 

 

 tabs border-2 vertical left 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 3

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 

 

 tabs border-2 vertical red right 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 3

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.

 

 

 tabs classic fill justify red 

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius felis sed luctus iaculis. Donec scelerisque nec ex id tempus. Phasellus quis ligula luctus, lobortis diam vel, volutpat ex. Donec ac elit eu dui pulvinar sollicitudin id eu leo. Morbi velit arcu, fermentum non purus non, aliquet fringilla metus. Etiam leo mauris, lobortis vitae sapien vitae, consequat venenatis risus. Maecenas nec odio facilisis, venenatis magna id, sagittis ante. Aenean gravida odio quis mauris blandit, eu efficitur nulla finibus. Vivamus eget neque sapien. Vestibulum molestie consequat erat a posuere. Cras ullamcorper ut magna posuere aliquam. Aenean molestie libero et tellus maximus, a laoreet metus suscipit. Aliquam ac lectus lorem. Nullam turpis est, imperdiet a mauris hendrerit, bibendum mattis massa. Morbi id venenatis nunc, nec pharetra sapien. Aliquam ultrices nisl in consequat feugiat.

Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in dui id lacus vestibulum congue finibus sed nibh. Donec dictum tortor et felis fermentum condimentum. Suspendisse in velit a velit consequat mollis in et erat. Duis ultricies pellentesque velit, eu posuere purus blandit quis. Duis a aliquam lorem, sit amet lobortis velit. Donec porta purus leo, nec ornare quam pulvinar sit amet. Nam aliquam ac turpis eu dictum. Maecenas gravida, massa id bibendum viverra, massa turpis commodo nulla, vitae dictum quam turpis rhoncus mauris. Vestibulum venenatis commodo ligula.

Tab 3

Aenean malesuada libero dui, ac cursus eros lobortis et. Cras tincidunt mauris a nibh molestie pretium. Pellentesque a varius mi, quis suscipit felis. Suspendisse vulputate fringilla libero vel tristique. Pellentesque fermentum lorem eu arcu euismod ornare. Maecenas porta ornare nisi in tempor. Donec sit amet sem vel libero ultricies vulputate. Suspendisse sit amet mi id augue iaculis tincidunt ut vitae risus. Nullam sed nunc luctus, sodales mauris sit amet, facilisis ex. Integer bibendum tincidunt neque a mollis. Vivamus ex sem, interdum non ullamcorper in, laoreet at erat. Etiam id pharetra est. Vivamus vel elit non ligula consequat tincidunt vitae vel felis.