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—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—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="/clientes/create" class="btn btn-success btn-sm" title="Add New Cliente">
<i class="fa fa-plus" aria-hidden="true"></i> Add New
</a>
<a href="/" 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="/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="/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>
Comments fornecido por CComment