Latest Posts

Showing posts with label Bootstrap. Show all posts
Showing posts with label Bootstrap. Show all posts

Sunday, June 28, 2015

Bootstrap list group example

Posted by at No comments: 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script>
        angular.module('app', []);

        angular.module('app').controller("MainController", function () {
            var vm = this;
            vm.title = 'AngularJS List Group Example';
            vm.searchInput = '';
            vm.shows = [
                {
                    title: 'title 1',
                    year: 2001,
                    favorite: true
                },
                {
                    title: 'title 2',
                    year: 2002,
                    favorite: false
                },
                {
                    title: 'title 3',
                    year: 2003,
                    favorite: true
                },
                {
                    title: 'title 4',
                    year: 2014,
                    favorite: true
                },
                {
                    title: 'title 5',
                    year: 2005,
                    favorite: false
                }
            ];
        });
    </script>
</head>
<body ng-app="app" ng-controller="MainController as main">
    <div class="container">
        <h1>{{main.title}}</h1>
        <h3>A list of TV shows</h3>
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="show in main.shows"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>
        </ul>
        
    </div>
</body>
</html>

Bootstrap Login Responsive Form

Posted by at No comments: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Responsive Login Form</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    @*<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">*@
    @*<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>*@

</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="form-border">
                    <h2>Login Form</h2>
                    <form id="loginform" class="form-horizontal" role="form">

                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
                        </div>

                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
                        </div>



                        <div class="input-group">
                            <div class="checkbox">
                                <label>
                                    <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
                                </label>
                            </div>
                        </div>


                        <div style="margin-top:10px" class="form-group">
                            <!-- Button -->

                            <div class="col-sm-12 controls">
                                <a id="btn-login" href="#" class="btn btn-primary">Login  </a>
                                <a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>

                            </div>
                        </div>

                    </form>
                </div>

            </div>
            <div class="col-md-8">
            </div>
        </div>
    </div>
</body>
</html>

Thursday, June 25, 2015

AngularJS and Twitter Bootstrap and search glyphicon

Posted by at No comments: 
<!DOCTYPE html>
<html lang="en">


<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<script>
    angular.module("simpleapp", [])
        .controller("SimpleController", function ($scope) {
            $scope.entity = {};
            $scope.entity.title = "A simple AngularJS app";
        });
</script>
<body ng-app="simpleapp">


    <div ng-controller="SimpleController">

        <h2>Hello, {{entity.title}}</h2>

    </div>

    <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
        </span>
        <input type="text" class="form-control" ng-model="main.searchInput">
    </div>

</body>

</html>
Subscribe to: Posts (Atom)