├── src ├── main │ ├── javascript │ │ ├── filters.js │ │ ├── routes.js │ │ ├── services.js │ │ ├── app.js │ │ └── controllers.js │ ├── webapp │ │ ├── .gitignore │ │ ├── css │ │ │ ├── specific.css │ │ │ └── theme.css │ │ ├── WEB-INF │ │ │ └── beans.xml │ │ ├── index.html │ │ ├── partials │ │ │ └── home.html │ │ └── theme.html │ └── java │ │ └── nl │ │ └── ivonet │ │ ├── model │ │ └── Hello.java │ │ ├── controler │ │ └── HomeControler.java │ │ └── application │ │ └── SeedApplication.java └── test │ ├── java │ ├── README.md │ └── nl │ │ └── ivonet │ │ ├── application │ │ └── SeedApplicationTest.java │ │ └── controler │ │ └── HomeControlerTest.java │ ├── resources │ └── README.md │ └── javascript │ ├── README.md │ ├── controllersSpec.js │ └── karma.conf.js ├── .bowerrc ├── .gitignore ├── bower.json ├── README.md ├── package.json └── pom.xml /src/main/javascript/filters.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/main/javascript/routes.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/main/javascript/services.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/main/webapp/.gitignore: -------------------------------------------------------------------------------- 1 | vendor/ -------------------------------------------------------------------------------- /src/main/webapp/css/specific.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/test/java/README.md: -------------------------------------------------------------------------------- 1 | Put your java tests here -------------------------------------------------------------------------------- /src/test/resources/README.md: -------------------------------------------------------------------------------- 1 | Add Resources here -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "src/main/webapp/vendor" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | *.iml 3 | .DS_Store 4 | node_modules/ 5 | -------------------------------------------------------------------------------- /src/main/webapp/WEB-INF/beans.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /src/test/javascript/README.md: -------------------------------------------------------------------------------- 1 | # Javascript unit tests 2 | 3 | open a terminal in the root of this project 4 | 5 | ```bash 6 | npm start 7 | ``` 8 | 9 | Everytime you change a unit test in this folder karma will rerun 10 | the tests and comment in the terminal what happened 11 | 12 | ```bash 13 | karma start src/test/javascript/karma.conf.js 14 | ``` 15 | -------------------------------------------------------------------------------- /src/main/webapp/css/theme.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 70px; 3 | padding-bottom: 30px; 4 | } 5 | 6 | .theme-dropdown .dropdown-menu { 7 | position: static; 8 | display: block; 9 | margin-bottom: 20px; 10 | } 11 | 12 | .theme-showcase > p > .btn { 13 | margin: 5px 0; 14 | } 15 | 16 | .theme-showcase .navbar .container { 17 | width: auto; 18 | } 19 | -------------------------------------------------------------------------------- /src/main/java/nl/ivonet/model/Hello.java: -------------------------------------------------------------------------------- 1 | package nl.ivonet.model; 2 | 3 | /** 4 | * Simple model class. 5 | * @author Ivo Woltring 6 | */ 7 | public class Hello { 8 | private final String message; 9 | 10 | public Hello(final String world) { 11 | this.message = world; 12 | } 13 | 14 | public String getMessage() { 15 | return this.message; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/main/javascript/app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('app', [ 2 | 'ngRoute', 3 | 'controllers' 4 | ]); 5 | 6 | app.config(['$routeProvider', 7 | function ($routeProvider) { 8 | $routeProvider.when('/', { 9 | templateUrl: 'partials/home.html', 10 | controller: 'HomeController' 11 | }).otherwise({ 12 | redirectTo: '/' 13 | }); 14 | }]); -------------------------------------------------------------------------------- /src/main/javascript/controllers.js: -------------------------------------------------------------------------------- 1 | var controllers = angular.module("controllers", []); 2 | 3 | controllers.controller("HomeController", ['$scope', '$http', function ($scope, $http) { 4 | $scope.debug = false; 5 | $scope.title = 'Hello '; 6 | 7 | $http.get("service/home").success(function (data) { 8 | $scope.data = data; 9 | $scope.title += $scope.data.message; 10 | }); 11 | 12 | $scope.toggleDebug = function () { 13 | $scope.debug = !$scope.debug; 14 | }; 15 | }]); -------------------------------------------------------------------------------- /src/main/java/nl/ivonet/controler/HomeControler.java: -------------------------------------------------------------------------------- 1 | package nl.ivonet.controler; 2 | 3 | import nl.ivonet.model.Hello; 4 | 5 | import javax.enterprise.context.RequestScoped; 6 | import javax.ws.rs.GET; 7 | import javax.ws.rs.Path; 8 | import javax.ws.rs.Produces; 9 | import javax.ws.rs.core.MediaType; 10 | 11 | /** 12 | * 13 | * @author Ivo Woltring 14 | */ 15 | @Path("/home") 16 | @RequestScoped 17 | public class HomeControler { 18 | 19 | @GET 20 | @Produces(MediaType.APPLICATION_JSON) 21 | public Hello get() { 22 | return new Hello("world"); 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/test/javascript/controllersSpec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /* jasmine specs for controllers go here */ 4 | 5 | describe('Controller tests', function () { 6 | 7 | describe('HomeController', function () { 8 | var scope, ctrl; 9 | 10 | beforeEach(module('app')); 11 | beforeEach(inject(function ($rootScope, $controller) { 12 | scope = $rootScope.$new(); 13 | ctrl = $controller('HomeController', {$scope: scope}); 14 | })); 15 | 16 | 17 | it('should contain hello', function () { 18 | expect(scope.title).toBe('Hello '); 19 | }); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "java-angularjs-seed", 3 | "version": "0.0.0", 4 | "authors": [ 5 | "IvoNet " 6 | ], 7 | "description": "A java / maven / angularjs seed project", 8 | "keywords": [ 9 | "java", 10 | "maven", 11 | "angularjs", 12 | "seed" 13 | ], 14 | "license": "Apache 2.0", 15 | "homepage": "http://ivonet.nl", 16 | "private": true, 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "src/main/webapp/vendor", 22 | "test", 23 | "tests" 24 | ], 25 | "dependencies": { 26 | "angular-loader": "1.3.0-beta.14", 27 | "angular-mocks": "1.3.0-beta.14", 28 | "angular-route": "1.3.0-beta.14", 29 | "angular": "1.3.0-beta.14", 30 | "bootstrap": "3.2.0" 31 | }, 32 | "main": "src/main/webapp/index.html" 33 | } 34 | -------------------------------------------------------------------------------- /src/test/javascript/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config){ 2 | config.set({ 3 | 4 | basePath : '../../../', 5 | 6 | files : [ 7 | 'src/main/webapp/vendor/angular**/**.min.js', 8 | 'src/main/webapp/vendor/angular-mocks/angular-mocks.js', 9 | 'src/main/javascript/**/*.js', 10 | 'src/test/javascript/**/*Spec.js', 11 | 'src/test/javascript/**/!(karma.conf).js' 12 | ], 13 | 14 | autoWatch : true, 15 | 16 | frameworks: ['jasmine'], 17 | 18 | browsers: ['PhantomJS'], 19 | 20 | plugins : [ 21 | 'karma-chrome-launcher', 22 | 'karma-firefox-launcher', 23 | 'karma-phantomjs-launcher', 24 | 'karma-jasmine', 25 | 'karma-junit-reporter' 26 | ], 27 | 28 | junitReporter : { 29 | outputFile: 'target/test_out/unit.xml', 30 | suite: 'src/test/javascript' 31 | } 32 | 33 | }); 34 | }; -------------------------------------------------------------------------------- /src/main/webapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Seed App 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/main/webapp/partials/home.html: -------------------------------------------------------------------------------- 1 | 2 | 20 |
21 | 22 | 23 |
24 |

{{title}}!

25 | 26 |

This is a basic Bootstrap theme I used in the seed application.

27 | 28 |

Learn more »

29 | 30 |
31 | 32 |
33 | 34 | 
{{ data | json }}
35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Java / Maven / AngularJs seed project 2 | 3 | ## Introduction 4 | 5 | This project aims to be a good starting point for a java / maven / angularjs project. 6 | 7 | > NOTE: Deprecated. 8 | > 9 | > It was a very fine and well used Proof of concept and I learned a lot from it. The blogs and articles resulting from this POC have been read by many people, but as all things go, this project is no longer a good source of information. 10 | > Use it as you see fit, but I do not recommend using it for real projects anymore. 11 | 12 | check it out: 13 | 14 | ```bash 15 | git clone https://github.com/IvoNet/java-angularjs-seed.git 16 | ``` 17 | 18 | ## Prerequisites 19 | * Firefox or Chrome 20 | * [npm](https://www.npmjs.org) 21 | * [nodejs](http://nodejs.org) 22 | * [JDK](http://www.oracle.com/technetwork/java/javaee/downloads/index.html) 23 | * [IDE](http://www.jetbrains.com/) 24 | * [bower](http://bower.io) 25 | * [PhantomJs](http://phantomjs.org) or `brew install phantomjs` 26 | * [Application Server](https://glassfish.java.net/download.html) or `brew install glassfish` 27 | 28 | ## Installation 29 | 30 | ```bash 31 | mvn package 32 | ``` 33 | 34 | When running this command a couple of things happen: 35 | * Bower install will be run 36 | * JSLint will be run in src/main/javascript sources 37 | * Javascript will be minified 38 | * All the other standard maven phases. 39 | 40 | ## Status of the project 41 | 42 | See the article on [DZone](http://ivo2u.nl/5U) 43 | 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "java-angular-seed", 3 | "private": true, 4 | "version": "0.0.0", 5 | "description": "A starter project for AngularJS combined with java and maven", 6 | "repository": "https://github.com/ivonet/java-angular-seed", 7 | "license": "Apache 2.0", 8 | "devDependencies": { 9 | "bower": "^1.3.1", 10 | "http-server": "^0.6.1", 11 | "karma": "~0.12", 12 | "karma-requirejs": "0.2.2", 13 | "karma-script-launcher": "0.1.0", 14 | "karma-chrome-launcher": "^0.1.4", 15 | "karma-firefox-launcher": "^0.1.3", 16 | "karma-phantomjs-launcher": "0.1.4", 17 | "karma-jasmine": "^0.1.5", 18 | "karma-junit-reporter": "^0.2.2", 19 | "shelljs": "^0.2.6" 20 | }, 21 | "scripts": { 22 | "postinstall": "bower install", 23 | "prestart": "npm install & mvn clean package", 24 | "start": "http-server target/app -a localhost -p 8000", 25 | "pretest": "npm install", 26 | "test": "karma start src/test/javascript/karma.conf.js", 27 | "test-single-run": "karma start src/test/javascript/karma.conf.js --single-run", 28 | "preupdate-webdriver": "npm install", 29 | "update-webdriver": "webdriver-manager update", 30 | "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('src/main/webapp/vendor/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'src/main/webapp/index.html');\"" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/test/java/nl/ivonet/application/SeedApplicationTest.java: -------------------------------------------------------------------------------- 1 | package nl.ivonet.application; 2 | 3 | import nl.ivonet.controler.HomeControler; 4 | import org.glassfish.jersey.jackson.JacksonFeature; 5 | import org.junit.Before; 6 | import org.junit.Test; 7 | 8 | import javax.ws.rs.ApplicationPath; 9 | import java.util.Set; 10 | 11 | import static org.hamcrest.MatcherAssert.assertThat; 12 | import static org.hamcrest.core.Is.is; 13 | import static org.junit.Assert.assertEquals; 14 | import static org.junit.Assert.assertNotNull; 15 | 16 | public class SeedApplicationTest { 17 | 18 | private SeedApplication seedApplication; 19 | 20 | @Before 21 | public void setUp() throws Exception { 22 | this.seedApplication = new SeedApplication(); 23 | 24 | } 25 | 26 | @Test 27 | public void testGetClasses() throws Exception { 28 | final Set> classes = this.seedApplication.getClasses(); 29 | assertNotNull(classes); 30 | assertEquals(2, classes.size()); 31 | assertThat("contains the the JacksonFeature", classes.contains(JacksonFeature.class)); 32 | assertThat("contains the HomeController", classes.contains(HomeControler.class)); 33 | } 34 | 35 | @Test 36 | public void testAnnotations() throws Exception { 37 | 38 | 39 | assertThat("The Class has the annotation ApplicationPath ", this.seedApplication.getClass() 40 | .isAnnotationPresent( 41 | ApplicationPath.class)); 42 | final ApplicationPath annotation = this.seedApplication.getClass() 43 | .getAnnotation(ApplicationPath.class); 44 | assertThat("The containing string is 'service'", annotation.value(), is("service")); 45 | } 46 | } -------------------------------------------------------------------------------- /src/main/java/nl/ivonet/application/SeedApplication.java: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2014 by Ivo Woltring (http://ivonet.nl) 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | package nl.ivonet.application; 18 | 19 | 20 | import nl.ivonet.controler.HomeControler; 21 | 22 | import javax.ws.rs.ApplicationPath; 23 | import javax.ws.rs.core.Application; 24 | import java.util.Set; 25 | 26 | /** 27 | * Basic JAX-RS application. 28 | * 29 | * @author Ivo Woltring 30 | */ 31 | @ApplicationPath("service") 32 | public class SeedApplication extends Application { 33 | 34 | @Override 35 | public Set> getClasses() { 36 | final Set> resources = new java.util.HashSet<>(); 37 | // following code can be used to customize Jersey 2.0 JSON provider: 38 | try { 39 | final Class jsonProvider = Class.forName("org.glassfish.jersey.jackson.JacksonFeature"); 40 | // Class jsonProvider = Class.forName("org.glassfish.jersey.moxy.json.MoxyJsonFeature"); 41 | // Class jsonProvider = Class.forName("org.glassfish.jersey.jettison.JettisonFeature"); 42 | resources.add(jsonProvider); 43 | } catch (final ClassNotFoundException ex) { 44 | java.util.logging.Logger.getLogger(getClass().getName()) 45 | .log(java.util.logging.Level.SEVERE, null, ex); 46 | } 47 | addRestResourceClasses(resources); 48 | return resources; 49 | } 50 | 51 | /** 52 | * Add your own resources here. 53 | */ 54 | private void addRestResourceClasses(final Set> resources) { 55 | resources.add(HomeControler.class); 56 | } 57 | 58 | } 59 | -------------------------------------------------------------------------------- /src/test/java/nl/ivonet/controler/HomeControlerTest.java: -------------------------------------------------------------------------------- 1 | package nl.ivonet.controler; 2 | 3 | import nl.ivonet.model.Hello; 4 | import org.junit.Before; 5 | import org.junit.Test; 6 | 7 | import javax.enterprise.context.RequestScoped; 8 | import javax.ws.rs.GET; 9 | import javax.ws.rs.Path; 10 | import javax.ws.rs.Produces; 11 | import javax.ws.rs.core.MediaType; 12 | import java.lang.reflect.Method; 13 | 14 | import static org.hamcrest.MatcherAssert.assertThat; 15 | import static org.hamcrest.core.Is.is; 16 | import static org.junit.Assert.assertNotNull; 17 | 18 | public class HomeControlerTest { 19 | 20 | private HomeControler controler; 21 | 22 | @Before 23 | public void setUp() throws Exception { 24 | this.controler = new HomeControler(); 25 | 26 | } 27 | 28 | @Test 29 | public void testGet() throws Exception { 30 | final Hello result = this.controler.get(); 31 | assertNotNull(result); 32 | assertThat("the result message is world", result.getMessage(), is("world")); 33 | } 34 | 35 | @Test 36 | public void testGetMethodAnnotations() throws Exception { 37 | final Method method = this.controler.getClass() 38 | .getMethod("get"); 39 | assertThat("The method has the GET annotation", method.isAnnotationPresent(GET.class)); 40 | assertThat("The method produces JSon", method.isAnnotationPresent(Produces.class)); 41 | 42 | final Produces produces = method.getDeclaredAnnotation(Produces.class); 43 | assertThat("The produced mediatype is application/json", produces.value()[0], is(MediaType.APPLICATION_JSON)); 44 | } 45 | 46 | @Test 47 | public void testPathAnnotation() throws Exception { 48 | assertNotNull(this.controler.getClass() 49 | .getAnnotations()); 50 | assertThat("The controller has the annotation Path", this.controler.getClass() 51 | .isAnnotationPresent(Path.class)); 52 | 53 | final Path path = this.controler.getClass() 54 | .getAnnotation(Path.class); 55 | assertThat("The path is /home", path.value(), is("/home")); 56 | } 57 | 58 | @Test 59 | public void testScope() throws Exception { 60 | assertNotNull(this.controler.getClass() 61 | .getAnnotations()); 62 | assertThat("The controller has the annotation RequestScoped", this.controler.getClass() 63 | .isAnnotationPresent( 64 | RequestScoped.class)); 65 | } 66 | } -------------------------------------------------------------------------------- /pom.xml: -------------------------------------------------------------------------------- 1 | 3 | 4.0.0 4 | nl.ivonet 5 | java-angularjs-seed 6 | war 7 | 1.0-SNAPSHOT 8 | 9 | java-angularjs-seed Maven Webapp 10 | 11 | http://ivonet.nl 12 | 13 | 14 | app 15 | ${project.build.directory}/endorsed 16 | src/main/webapp/vendor 17 | UTF-8 18 | 19 | 20 | 21 | 22 | junit 23 | junit 24 | 4.11 25 | test 26 | 27 | 28 | org.mockito 29 | mockito-all 30 | 1.9.5 31 | test 32 | 33 | 34 | 35 | javax 36 | javaee-api 37 | 7.0 38 | provided 39 | 40 | 41 | 42 | com.fasterxml.jackson.module 43 | jackson-module-jaxb-annotations 44 | 2.4.0 45 | 46 | 47 | 48 | org.glassfish.jersey.media 49 | jersey-media-json-jackson 50 | 2.12 51 | test 52 | 53 | 54 | 55 | 56 | 57 | ${artifact.name} 58 | 59 | 60 | src/main/javascript 61 | true 62 | 63 | 64 | 65 | 66 | org.apache.maven.plugins 67 | maven-compiler-plugin 68 | 3.1 69 | 70 | 1.8 71 | 1.8 72 | 73 | ${endorsed.dir} 74 | 75 | 76 | 77 | 78 | org.apache.maven.plugins 79 | maven-war-plugin 80 | 2.4 81 | 82 | false 83 | 84 | 85 | 86 | org.apache.maven.plugins 87 | maven-dependency-plugin 88 | 2.6 89 | 90 | 91 | validate 92 | 93 | copy 94 | 95 | 96 | ${endorsed.dir} 97 | true 98 | 99 | 100 | javax 101 | javaee-endorsed-api 102 | 7.0 103 | jar 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | net.alchim31.maven 112 | yuicompressor-maven-plugin 113 | 1.1 114 | 115 | 116 | compress-js 117 | process-resources 118 | 119 | 120 | compress 121 | 122 | 123 | 124 | 125 | true 126 | 127 | target/${artifact.name}/js 128 | true 129 | 130 | **/js/**/*js 131 | vendor/** 132 | **/*min.css 133 | **/*min.js 134 | 135 | 136 | 137 | 138 | com.github.searls 139 | jasmine-maven-plugin 140 | 1.3.1.5 141 | 142 | 143 | 144 | test 145 | bdd 146 | 147 | 148 | 149 | 150 | org.openqa.selenium.phantomjs.PhantomJSDriver 151 | 152 | ${vendor.loc}/jquery/dist/jquery.js 153 | ${vendor.loc}/angular/angular.min.js 154 | ${vendor.loc}/angular-route/angular-route.min.js 155 | ${vendor.loc}/angular-mocks/angular-mocks.js 156 | 157 | src/main/javascript 158 | src/test/javascript 159 | 160 | *Spec.js 161 | 162 | 163 | 164 | 165 | org.codehaus.mojo 166 | exec-maven-plugin 167 | 1.3.2 168 | 169 | 170 | generate-sources 171 | 172 | exec 173 | 174 | 175 | 176 | 177 | bower 178 | 179 | install 180 | 181 | ${basedir} 182 | 183 | 184 | 185 | maven-clean-plugin 186 | 2.5 187 | 188 | 189 | 190 | src/main/webapp/vendor 191 | 192 | 193 | node_modules 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /src/main/webapp/theme.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Theme Template for Bootstrap 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 58 | 59 |
60 | 61 | 62 |
63 |

Hello, world!

64 | 65 |

This is a template for a simple marketing or informational website. It includes a large callout called a 66 | jumbotron and three supporting pieces of content. Use it as a starting point to create something more 67 | unique.

68 | 69 |

Learn more »

70 |
71 | 72 | 73 |
74 |

Buttons

75 |
76 |

77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |

85 |

86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 |

94 |

95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |

103 |

104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 |

112 | 113 | 114 |
115 |

Tables

116 |
117 |
118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
149 |
150 |
151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
181 |
182 |
183 | 184 |
185 |
186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 |
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
220 |
221 |
222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
251 |
252 |
253 | 254 | 255 |
256 |

Thumbnails

257 |
258 | A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 260 | 261 | 262 |
263 |

Labels

264 |
265 |

266 | Default 267 | Primary 268 | Success 269 | Info 270 | Warning 271 | Danger 272 |

273 | 274 |

275 | Default 276 | Primary 277 | Success 278 | Info 279 | Warning 280 | Danger 281 |

282 | 283 |

284 | Default 285 | Primary 286 | Success 287 | Info 288 | Warning 289 | Danger 290 |

291 |

292 | Default 293 | Primary 294 | Success 295 | Info 296 | Warning 297 | Danger 298 |

299 |
300 | Default 301 | Primary 302 | Success 303 | Info 304 | Warning 305 | Danger 306 |
307 |
308 | Default 309 | Primary 310 | Success 311 | Info 312 | Warning 313 | Danger 314 |
315 | 316 |

317 | Default 318 | Primary 319 | Success 320 | Info 321 | Warning 322 | Danger 323 |

324 | 325 | 326 |
327 |

Badges

328 |
329 |

330 | Inbox 42 331 |

332 | 337 | 338 | 339 |
340 |

Dropdown menus

341 |
342 |
343 | Dropdown 345 | 352 |
353 | 354 | 355 |
356 |

Navs

357 |
358 | 363 | 368 | 369 | 370 |
371 |

Navbars

372 |
373 | 374 |
375 |
376 |
377 | 383 | Project name 384 |
385 |
386 | 403 |
404 | 405 |
406 |
407 | 408 |
409 |
410 |
411 | 417 | Project name 418 |
419 |
420 | 437 |
438 | 439 |
440 |
441 | 442 | 443 |
444 |

Alerts

445 |
446 | 449 | 452 | 455 | 458 | 459 | 460 |
461 |

Progress bars

462 |
463 |
464 |
60% Complete
466 |
467 |
468 |
40% Complete (success)
470 |
471 |
472 |
20% Complete
474 |
475 |
476 |
60% Complete (warning)
478 |
479 |
480 |
80% Complete (danger)
482 |
483 |
484 |
100% Complete
486 |
487 |
488 |
35% Complete (success)
490 |
20% Complete (warning)
492 |
10% Complete (danger) 493 |
494 |
495 | 496 | 497 |
498 |

List groups

499 |
500 |
501 |
502 |
    503 |
  • Cras justo odio
    • 504 |
  • Dapibus ac facilisis in
    • 505 |
  • Morbi leo risus
    • 506 |
  • Porta ac consectetur ac
    • 507 |
  • Vestibulum at eros
    • 508 |
509 |
510 | 511 |
512 |
513 | 514 | Cras justo odio 515 | 516 | Dapibus ac facilisis in 517 | Morbi leo risus 518 | Porta ac consectetur ac 519 | Vestibulum at eros 520 |
521 |
522 | 523 |
524 |
525 | 526 |

List group item heading

527 | 528 |

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget 529 | risus varius blandit.

530 | 531 | 532 |

List group item heading

533 | 534 |

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget 535 | risus varius blandit.

536 | 537 | 538 |

List group item heading

539 | 540 |

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget 541 | risus varius blandit.

542 | 543 |
544 |
545 | 546 |
547 | 548 | 549 |
550 |

Panels

551 |
552 |
553 |
554 |
555 |
556 |

Panel title

557 |
558 |
559 | Panel content 560 |
561 |
562 |
563 |
564 |

Panel title

565 |
566 |
567 | Panel content 568 |
569 |
570 |
571 | 572 |
573 |
574 |
575 |

Panel title

576 |
577 |
578 | Panel content 579 |
580 |
581 |
582 |
583 |

Panel title

584 |
585 |
586 | Panel content 587 |
588 |
589 |
590 | 591 |
592 |
593 |
594 |

Panel title

595 |
596 |
597 | Panel content 598 |
599 |
600 |
601 |
602 |

Panel title

603 |
604 |
605 | Panel content 606 |
607 |
608 |
609 | 610 |
611 | 612 | 613 |
614 |

Wells

615 |
616 |
617 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non 618 | magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque 619 | nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi 620 | erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

621 |
622 | 623 | 624 |
625 | 626 | 627 | 628 | 630 | 631 | 632 | 633 | 634 | 635 | --------------------------------------------------------------------------------