"Uuring"
Bootstrap 3.0.0 Snippet by Rait

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h2>Töötaja rahulolu uuring</h2> <hr> <div class="panel panel-default"> <div class="panel-heading">Tutvustus</div> <div class="panel-body"> <p><b>Tere!<br><br> Oled alustamas ettevõtte aasta töötajate rahulolu küsitlusele. Kui annad ausat tagasisidet organisatsiooni kohta, siis on võimalik töökultuuri parandada. Oluline on vastata küsimustele võimalikult ausalt. <br><br> </b></p> <p>See küsitlus on töötaja rahulolu küsitlus. Vastata tuleb 50 küsimusele.</p> <ul> <li>Kui küsitlusele vastamine jääb pooleli, siis on sellele võimalik vastata kasutades personaalselt Sulle saadetud linki</li> <li>Küsitlusele vastamine on kohustuslik kõigile töötajatele</li> <li>Ära saada seda küsitlust edasi teistele vastamiseks. Iga küsitlus on töötaja põhine.</li> <li>Sinu otsene ülemus ei näe vastuseid. Uuringufirma koostab üldise aruande.</li> </ul> <hr> <div class="text-center"> <button class="btn btn-lg btn-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Alusta vastamist</button> </div> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="50" aria-valuemax="100" style="min-width: 50%;"> 50% </div> </div> <div class="panel panel-default"> <div class="panel-heading text-center">Küsimus 1/50</div> <div class="panel-body"> <h4>Kas sa tunned, et sinu arvamust võetakse kuulda?</h4> <hr> <div class="radio radio-success"> <input type="radio" name="radio1" id="radio1" value="option1"> <label for="radio1"> Olen väga rahul </label> </div> <div class="radio radio-primary"> <input type="radio" name="radio1" id="radio2" value="option2"> <label for="radio2"> Pigem rahul </label> </div> <div class="radio radio-warning"> <input type="radio" name="radio1" id="radio3" value="option3"> <label for="radio3"> Pigem ei ole rahul </label> </div> <div class="radio radio-danger"> <input type="radio" name="radio1" id="radio4" value="option4"> <label for="radio4"> Ei ole rahul </label> </div> <hr> <!-- <div class="checkbox"> <input id="checkbox1" type="checkbox"> <label for="checkbox1"> Default </label> </div> <div class="checkbox checkbox-primary"> <input id="checkbox2" type="checkbox" checked> <label for="checkbox2"> Primary </label> </div> <div class="checkbox checkbox-success"> <input id="checkbox3" type="checkbox"> <label for="checkbox3"> Success </label> </div> <div class="checkbox checkbox-info"> <input id="checkbox4" type="checkbox"> <label for="checkbox4"> Info </label> </div> <div class="checkbox checkbox-warning"> <input id="checkbox5" type="checkbox" checked> <label for="checkbox5"> Warning </label> </div> <div class="checkbox checkbox-danger"> <input id="checkbox6" type="checkbox" checked> <label for="checkbox6"> Check me out </label> </div> --> <p>Soovikorral põhjenda valikut</p> <textarea class="form-control" rows="3"></textarea> </div> <div class="panel-footer"> <button class="btn btn-success">Tagasi</button> <button class="btn btn-success pull-right">Edasi</button> </div> </div> </div> </div> </div>
body{ font-family: 'Montserrat', sans-serif; } /*Form fieldus Radio and Checkbox*/ .checkbox { padding-left: 20px; } .checkbox label { display: inline-block; position: relative; padding-left: 5px; } .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: -20px; border: 1px solid #cccccc; border-radius: 3px; background-color: #fff; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } .checkbox label::after { display: inline-block; position: absolute; width: 16px; height: 16px; left: 0; top: 0; margin-left: -20px; padding-left: 3px; padding-top: 1px; font-size: 11px; color: #555555; } .checkbox input[type="checkbox"] { opacity: 0; } .checkbox input[type="checkbox"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .checkbox input[type="checkbox"]:checked + label::after { font-family: 'FontAwesome'; content: "\f00c"; } .checkbox input[type="checkbox"]:disabled + label { opacity: 0.65; } .checkbox input[type="checkbox"]:disabled + label::before { background-color: #eeeeee; cursor: not-allowed; } .checkbox.checkbox-circle label::before { border-radius: 50%; } .checkbox.checkbox-inline { margin-top: 0; } .checkbox-primary input[type="checkbox"]:checked + label::before { background-color: #428bca; border-color: #428bca; } .checkbox-primary input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-danger input[type="checkbox"]:checked + label::before { background-color: #d9534f; border-color: #d9534f; } .checkbox-danger input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-info input[type="checkbox"]:checked + label::before { background-color: #5bc0de; border-color: #5bc0de; } .checkbox-info input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-warning input[type="checkbox"]:checked + label::before { background-color: #f0ad4e; border-color: #f0ad4e; } .checkbox-warning input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-success input[type="checkbox"]:checked + label::before { background-color: #5cb85c; border-color: #5cb85c; } .checkbox-success input[type="checkbox"]:checked + label::after { color: #fff; } .radio { padding-left: 20px; } .radio label { display: inline-block; position: relative; padding-left: 5px; } .radio label::before { content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: -20px; border: 1px solid #cccccc; border-radius: 50%; background-color: #fff; -webkit-transition: border 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out; transition: border 0.15s ease-in-out; } .radio label::after { display: inline-block; position: absolute; content: " "; width: 11px; height: 11px; left: 3px; top: 3px; margin-left: -20px; border-radius: 50%; background-color: #555555; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); } .radio input[type="radio"] { opacity: 0; } .radio input[type="radio"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .radio input[type="radio"]:disabled + label { opacity: 0.65; } .radio input[type="radio"]:disabled + label::before { cursor: not-allowed; } .radio.radio-inline { margin-top: 0; } .radio-primary input[type="radio"] + label::after { background-color: #428bca; } .radio-primary input[type="radio"]:checked + label::before { border-color: #428bca; } .radio-primary input[type="radio"]:checked + label::after { background-color: #428bca; } .radio-danger input[type="radio"] + label::after { background-color: #d9534f; } .radio-danger input[type="radio"]:checked + label::before { border-color: #d9534f; } .radio-danger input[type="radio"]:checked + label::after { background-color: #d9534f; } .radio-info input[type="radio"] + label::after { background-color: #5bc0de; } .radio-info input[type="radio"]:checked + label::before { border-color: #5bc0de; } .radio-info input[type="radio"]:checked + label::after { background-color: #5bc0de; } .radio-warning input[type="radio"] + label::after { background-color: #f0ad4e; } .radio-warning input[type="radio"]:checked + label::before { border-color: #f0ad4e; } .radio-warning input[type="radio"]:checked + label::after { background-color: #f0ad4e; } .radio-success input[type="radio"] + label::after { background-color: #5cb85c; } .radio-success input[type="radio"]:checked + label::before { border-color: #5cb85c; } .radio-success input[type="radio"]:checked + label::after { background-color: #5cb85c; }

Related: See More


Questions / Comments: