The next step is... Bootstrap by Omar Qunsul
•
0 recomendaciones•910 vistas
The next step is... Bootstrap
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (17)
Destacado
Destacado (13)
Similar a The next step is... Bootstrap by Omar Qunsul
Similar a The next step is... Bootstrap by Omar Qunsul (20)
Último
Último (20)
The next step is... Bootstrap by Omar Qunsul
- 1. Bootstrap .. is the next step Omar Qunsul honeytracks.com
- 2. So you built a website .... ?
- 5. RailsGirls Munich 2012 “So what is the next step ?”
- 7. But what about CSS ?
- 8. But what about CSS ?
- 9. But what about CSS ?
- 10. But what about CSS ?
- 11. Bootstrap CSS and JS Framework
- 12. First include Bootstrap 3 in your application app/views/layouts/application.html.erb <head> <title>Railsgirls</title> <%= stylesheet_link_tag "application", media: "all", "dataturbolinks-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>
- 13. Navigation app/views/layouts/application.html.erb <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>
- 14. IS THAT NICE !?
- 16. Tables should be AWESOME ! app/views/ideas/index.html.erb <h1>Listing ideas</h1> <table class="table table-striped"> <thead> <tr> <th>Name</th> <th>Description</th> <th>Picture</th>
- 18. But still this looks odd
- 19. Buttons should look like ........well buttons ! app/views/ideas/index.html.erb <%= link_to 'New Idea', new_idea_path, :class => "btn btn-primary btn-lg" %>
- 20. Cool ! But let’s click that button !
- 22. Forms ! app/views/ideas/_form.html.erb <%= form_for(@idea, :html => {:class =>"form-horizontal", :role =>"form"}) do |f| %>
- 23. Each form element app/views/ideas/_form.html.erb <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>
- 25. See getbootstrap.com for more details and info, about Boostrap 3. There are many css components!
- 27. Themes app/views/layouts/application.html.erb <head> <title>Railsgirls</title> <%= stylesheet_link_tag "application", media: "all", "dataturbolinks-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>