Introdução ao BootStrap

2017-06-23T10:40:21-03:00
Framework Bootstrap
O framework Bootstrap foi criado pela equipe do Twitter e liberado como open source para a comunidade. É muito popular atualmente e facilita o trabalho do web designer, pois lida muito bem com o CSS e o JavaScript.
Seus recursos e facilidades o lavaram à popularidade atual.
Download
http://getbootstrap.com/getting-started/#download
Veja agora duas páginas, uma sem e outra com o CSS via Bootstrap
Com o Bootstrap
Agora sem
Usando o Bootstrap

2017-06-23T10:40:21-03:00
Classes básicas para aplicação do Bootstrap



O simples fato de adicionar o CSS no template já altera vários aspectos



Acessar - http://getbootstrap.com/getting-started/#download e copiar o código CDN



<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

    <title>Produtos</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



Uma ótima ideia é usar os Glyphicons do bootstrap.



</head>



Tabela

 <table class="table table-striped table-bordered table-hover">



Botões

class="btn btn-primary"

class="btn btn-warning"



Form

default - width: 100%;

Em label usar form-group

  <div class="form-group">

    <label for="Password">Password</label>

    <input type="password" class="form-control" id="Password" placeholder="Password">

  </div>



Tamanho de campos com as classes, sem form-control

input-sm

input-lg

input



/* Set widths on the form inputs since otherwise they're 100% wide */

input[type="text"],

input[type="password"],

input[type="email"],

input[type="tel"],

input[type="select"] {

    max-width: 280px;

}



Horizontal form

<form class="form-horizontal">



Em Cada campo

class="form-control"



<textarea class="form-control" rows="3"></textarea>



Checkbox e radio



<div class="checkbox">

  <label>

    <input type="checkbox" value="">

    Option one is this and that&mdash;be sure to include why it's great

  </label>

</div>

<div class="checkbox disabled">

  <label>

    <input type="checkbox" value="" disabled>

    Option two is disabled

  </label>

</div>



<div class="radio">

  <label>

    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>

    Option one is this and that&mdash;be sure to include why it's great

  </label>

</div>

<div class="radio">

  <label>

    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">

    Option two can be something else and selecting it will deselect option one

  </label>

</div>

<div class="radio disabled">

  <label>

    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>

    Option three is disabled

  </label>

</div>



Linha da Grid

class="row"



Grid - 3 colunas

class="col-sm-3"



Propaganda

id="advertisement"



Exemplo de Uso



Adaptado de uma view de aplicativo Laravel



    <div class="container">

        <div class="row">

 

            <div class="col-md-9">

                <div class="panel panel-default">

                    <div class="panel-heading">Clientes</div>

                    <div class="panel-body">

                        <a href="http://backup/portal//clientes/create" class="btn btn-success btn-sm" title="Add New Cliente">

                            <i class="fa fa-plus" aria-hidden="true"></i> Add New

                        </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                        <a href="http://backup/portal//" class="btn btn-success btn-sm" title="Menu Principal">

                            <i class="fa fa-bars" aria-hidden="true"></i> Menu Principal

                        </a>

 

                        <form action="/clientes" class= "navbar-form navbar-right">

                        <div class="input-group">

                            <input type="text" class="form-control" name="search" placeholder="Search...">

                            <span class="input-group-btn">

                                <button class="btn btn-default" type="submit">

                                    <i class="fa fa-search"></i>

                                </button>

                            </span>

                        </div>

                        </form>

 

                        <br/>

                        <br/>

                        <div class="table-responsive">

                            <table class="table table-borderless">

                                <thead>

                                    <tr>

                                        <th>ID</th><th>Nome</th><th>Cpf</th><th>Nascimento</th><th>Actions</th>

                                    </tr>

                                </thead>

                                <tbody>

                                <?php foreach($clientes as $item){

                                    <tr>

                                        <td>{{ $item->id }}</td>

                                        <td>{{ $item->nome }}</td><td>{{ $item->cpf }}</td><td>{{ $item->nascimento }}</td>

                                        <td>

                                            <a href="http://backup/portal/{{ url('/clientes/' . $item->id) }}" title="View Cliente"><button class="btn btn-info btn-xs"><i class="glyphicon glyphicon-eye-open"></i> View</button></a>

                                            <a href="http://backup/portal/{{ url('/clientes/' . $item->id . '/edit') }}" title="Edit Cliente"><button class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-edit"></i> Edit</button></a>



                                            <form

                                                method ='DELETE',

                                                action = "'/clientes', $item->id"

                                                style = 'display:inline'

                                            >

                                                <button> <i class="glyphicon glyphicon-trash"></i> Delete'

                                                        type = 'submit'

                                                        class = 'btn btn-danger btn-xs'

                                                        title = 'Delete Cliente'

                                                        onclick ='return confirm("Confirm delete?")'

                                                </button>

                                            </form>

                                        </td>

                                    </tr>

                                }?>

                                </tbody>

                            </table>

                        </div>

 

                    </div>

                </div>

            </div>

        </div>

    </div>
Bootstrap - RibaFS Portal

Introdução ao BootStrap

Usando o Bootstrap
