├── .gitignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── bootstrap.vertical-tabs.css ├── bootstrap.vertical-tabs.min.css ├── bower.json ├── demo.html ├── index.js ├── package.json ├── screenshot-v.png ├── screenshot.png └── src ├── tabs.css └── tabs.sideways.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 'use strict'; 3 | 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | banner: '/*!\n' + 7 | ' * <%= pkg.name %> - v<%= pkg.version %>\n' + 8 | ' * <%= pkg.homepage %>\n' + 9 | ' * <%= grunt.template.today("yyyy-mm-dd") %>\n' + 10 | ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>\n' + 11 | ' * License: <%= pkg.license %>\n' + 12 | ' */\n', 13 | concat: { 14 | options: { 15 | banner: '<%= banner %>', 16 | stripBanners: true 17 | }, 18 | dist: { 19 | src: ['src/{,*/}*.css'], 20 | dest: 'bootstrap.vertical-tabs.css' 21 | } 22 | }, 23 | cssmin: { 24 | options: { 25 | banner: '<%= banner %>' 26 | }, 27 | dist: { 28 | src: ['src/*.css'], 29 | dest: 'bootstrap.vertical-tabs.min.css' 30 | } 31 | }, 32 | jshint: { 33 | options: { 34 | node: true, 35 | curly: true, 36 | eqeqeq: true, 37 | immed: true, 38 | latedef: true, 39 | newcap: true, 40 | noarg: true, 41 | sub: true, 42 | undef: true, 43 | unused: true, 44 | eqnull: true, 45 | boss: true 46 | }, 47 | gruntfile: { 48 | src: 'Gruntfile.js' 49 | } 50 | }, 51 | watch: { 52 | gruntfile: { 53 | files: '<%= jshint.gruntfile.src %>', 54 | tasks: ['jshint:gruntfile'] 55 | } 56 | } 57 | }); 58 | 59 | // These plugins provide necessary tasks 60 | grunt.loadNpmTasks('grunt-contrib-concat'); 61 | grunt.loadNpmTasks('grunt-contrib-jshint'); 62 | grunt.loadNpmTasks('grunt-contrib-watch'); 63 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 64 | 65 | // Default task 66 | grunt.registerTask('build', [ 67 | 'jshint', 68 | 'concat', 69 | 'cssmin' 70 | ]); 71 | 72 | grunt.registerTask('default', ['build']); 73 | }; 74 | 75 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 İsmail Demirbilek 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bootstrap Vertical Tabs ![bower version](http://img.shields.io/bower/v/bootstrap-vertical-tabs.svg) 2 | ======================= 3 | 4 | Vertical tabs component for Bootstrap 3. 5 | 6 | ![screenshot](screenshot.png) 7 | 8 | ### Install 9 | * Via npm: 10 | ```bash 11 | $ npm i -S bootstrap-vertical-tabs 12 | ``` 13 | * Via bower (recommended): 14 | ```bash 15 | $ bower install bootstrap-vertical-tabs 16 | ``` 17 | * Or you can just clone, [download](https://github.com/dbtek/bootstrap-vertical-tabs/releases) from GitHub. 18 | 19 | ### Usage 20 | 21 | * [Get](https://github.com/dbtek/bootstrap-vertical-tabs#install) the package. 22 | * Include css in your html. / Load with webpack or css processors. 23 | * Use it. 24 | 25 | #### Left Tabs 26 | ```html 27 |
28 | 29 | 35 |
36 | 37 |
38 | 39 |
40 |
Home Tab.
41 |
Profile Tab.
42 |
Messages Tab.
43 |
Settings Tab.
44 |
45 |
46 | ``` 47 | 48 | #### Right Tabs 49 | ```html 50 |
51 | 52 |
53 |
Home Tab.
54 |
Profile Tab.
55 |
Messages Tab.
56 |
Settings Tab.
57 |
58 |
59 | 60 |
61 | 62 | 68 |
69 | ``` 70 | #### Sideways Tabs :new: 71 | 72 | Add `sideways` class to tabs. 73 | 74 | Example: 75 | ``` 76 |