Bootstrap - RibaFS Portal http://backup/portal/basicos/bootstrap.html Sat, 07 Sep 2019 18:49:54 -0300 Joomla! - Open Source Content Management pt-br Introdução ao BootStrap http://backup/portal/basicos/bootstrap/introducao-ao-bootstrap.html http://backup/portal/basicos/bootstrap/introducao-ao-bootstrap.html 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

]]> Bootstrap Fri, 23 Jun 2017 10:40:21 -0300 Usando o Bootstrap http://backup/portal/basicos/bootstrap/usando-o-bootstrap.html http://backup/portal/basicos/bootstrap/usando-o-bootstrap.html 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 Fri, 23 Jun 2017 10:40:21 -0300