View
376
Download
1
Category
Tags:
Preview:
DESCRIPTION
The next step is... Bootstrap
Citation preview
Bootstrap .. is the next step
Omar Qunsulhoneytracks.com
So you built a website .... ?
RailsGirls Munich 2012“So what is the next step ?”
But what about CSS ?
But what about CSS ?
But what about CSS ?
But what about CSS ?
BootstrapCSS and JS Framework
<head> <title>Railsgirls</title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %></head>
app/views/layouts/application.html.erb
First include Bootstrap 3 in your application
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">Project</a> </div> <div class="navbar-collapse collapse"> <a class="navbar-brand" href="/ideas">Ideas</a> </div> </div></div>
<div class="container"> <%= yield %></div>
app/views/layouts/application.html.erb
Navigation
IS THAT NICE !?
<h1>Listing ideas</h1>
<table class="table table-striped"> <thead> <tr> <th>Name</th> <th>Description</th> <th>Picture</th>
app/views/ideas/index.html.erb
Tables should be AWESOME !
But still this looks odd
<%= link_to 'New Idea', new_idea_path, :class => "btn btn-primary btn-lg" %>
app/views/ideas/index.html.erb
Buttons should look like ........well buttons !
Cool ! But let’s click that button !
<%= form_for(@idea, :html => {:class =>"form-horizontal", :role =>"form"}) do |f| %>
app/views/ideas/_form.html.erb
Forms !
<div class="field form-group"> <%= f.label :name, :class => "control-label col-sm-2" %> <div class="col-sm-10"> <%= f.text_field :name , :class => "form-control", :placeholder => "Write the idea name" %> </div> </div>
app/views/ideas/_form.html.erb
Each form element
See getbootstrap.comfor more details and info, about Boostrap 3.
There are many css components!
<head> <title>Railsgirls</title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css"> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %></head>
app/views/layouts/application.html.erb
Themes
</presentation>
Thanx !
@OmarQunsul
Recommended