Twitter Bootstrap Basics

Twitter’s Bootstrap  ช่วยในการสร้างเว็บให้สวยงามที่อย่างที่ต้องการ(แน่นอนว่าเราต้องเรียนรู้ การใช้งาน) ในเวลาอันรวดเร็ว มี CSS และ JavaScript ที่พร้อมใช้งาน เช่นสร้าง ฟอร์ม เนวิกาเตอร์บาร์ และอื่นๆ สนับสนุนการทำเว็บบแบบ Responsive (คือมันตอบสนองต้องการคลิก หรือการแสดงผล) สรุปคือ โค้ดเองทำไมเพราะโค้ดเองใช้เวลามาก ใช้ Twitter Bootstrap ใช้เวลาน้อยกว่า ที่สำคัญคือ ดัดแปลง(customise) ได้อย่างที่เราต้องการ 

(จับภาพหน้าจอ เมื่อ 15 มกราคา 2556 เวลา 13.52 น.)

ในที่นี้ เน้นการเรียกใช้งานจากเ้ว็บเฟรมเวิร์ค Roby on Rails.

การเพิ่ม Twitter Bootstrap ใน รูบี้ออนเรลส์

1.. สมมุติในที่นี้เราจะสร้างเว็บแอปพลิเคชันขึ้นมาใหม่ เป็นร้านขายสินค้า  เราตั้งชื่อว่า  Store  เพื่อความง่ายเราจะใช้ Scaffold ในการสร้าง ตารางเก็บข้อมูลผลิตภัณฑ์ ต้งชื่อว่า Product 

2. เปิด Terminal แล้วพิมพ์คำสั่งดังนี้

$ rails new store
$ cd store
$ rails g scaffold product name price:decimal --skip-stylesheets
$ rake db:migrate

สิ่งที่เกิดขึ้นคือ
 - คำสั่ง --skip-stylesheets เป็น ออบชั่น(option) เพื่อบอก รูบี้เฟรมเวิร์ค ว่าไม่ต้องติดตั้ง Stylesheets เนื่องจากว่าเราต้องการใช้ จาก Bootstrap
- เราได้สร้างฐานข้อมูล จากคำสั่ง rake db:mirate  ชื่อตาราว่าง products

3. ลองรันคำสั่ง $: rails s  จะได้เว็บ ดังปรากฏ

4. เมื่อผ่านขั้นตอนที่ 3 แล้ว นั้นหมายความว่า เราได้เว็บว่างๆ ที่ยังไม่ได้ตกแต่งให้สวยงาม  ในขั้นตอนที่ 4 นี้จะเป็นการ เพิ่ม  twitter-bootstrap-rails เข้าไปในเฟรมเวิร์ค ด้วยการติดตั้ง เจ็ม(gem)   ทำได้ด้วยการเปิดไฟล์ ที่ชื่อว่า gemfile แล้ว แทรก คำสั่งเข้าไป

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer'

  gem 'uglifier', '>= 1.0.3'
  gem 'twitter-bootstrap-rails',:git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
end 

เมื่อเพิ่ม   gem 'twitter-bootstrap-rails'  แล้ว ให้ พิมพ์คำสั่ง ใน Terminal 

$ bundle install 

เพื่อเพิ่ม twitter-bootstrap เข้าไปในเฟรมเวิร์ค

5. We’ll need to run bundle next to install twitter-bootstrap-rails along with its dependencies. This gem has a number of dependencies including libv8 and less-rails and these enable our app to interpret the LESS syntax. Now that we have Bootstrap installed we can run its generator to install it.

6. This sets up Bootstrap under the /app/assets directory. One key file that was generated is bootstrap_and_overrides.css.less. This file loads up Bootstrap and it’s a good place to customize the styling to suit your application. After we restart the server and reload the page we can see that the styling is already starting to look better, but there’s still a lot to do.

7.

Improving The Layout

We’ll focus first on the application’s layout. The twitter-bootstrap-rails gem provides a bootstrap:layout generator for generating a layout file, but we won’t use that here. Instead we’ll walk through the steps required to change the layout to give you a better idea as to how Twitter Bootstrap works.

There are two kinds of layouts, fixed and fluid. A fixed layout is a specific pixel width, while a fluid layout will expand to the full width of the browser. Specifying either container or container-fluid as the class of the wrapper div will determine which layout is used. We’re going to use a fixed-width layout here so we’ll add a div with a container class to the body of the layout file.

8.Twitter Bootstrap uses a 12-column grid system. This makes it easy to implement column-based layout designs by specifying the width of each column. This layout is responsive so if we reduce the width of the browser the layout will change accordingly. Let’s say that we want a sidebar in our design and that we want this to take up 25% of the width of the page. We can do that by modifying the layout file like this. We’ll just add some static text to the sidebar for now.

Adding a Navigation Bar

9.Next we’ll add a navigation bar to the top of the page with some links for navigating the site. The components section of the documentation describes the various navigation options that Twitter Bootstrap provides, including a navbar. This navbar can be customized to suit our needs and we can add links, dropdown sections, search fields and so on. The documentation has good examples of how we can add each type of item. We’ll add our navbar at the top of the layout page’s body.

10.Our navigation has a brand name section and some placeholder links. The section at the top is interesting. It handles the collapsing behaviour when the browser resizes for the navigation. Reloading the page now will show our new navbar.

11. Note that we see the collapsed version of the navigation. This is because the browser window’s width is set to around 800px which means that it isn’t wide enough to show the full version. If we widen the window the navigation will appear.

12. There’s a problem when we do this, however. The top part of the page is covered by the navbar. This is a side effect of using a fixed navbar and the documentation tells us that to avoid this unwanted effect we should add at least 40 pixels of padding to the top of the body element between the Bootstrap CSS and the responsive CSS. We do this inside the bootstrap_and_overrides CSS file. This file includes the bootstrap and responsive files and the documentation says that padding needs to be added between these.

Final Tweaks to The Header

13. Our application’s layout file is pretty much complete now but there are a couple of thing we need to add in the head section to ensure that it works everywhere.

The first piece of code we’ve added here improves the HTML 5 support in older versions of Internet Explorer. The second is a viewport meta tag and this fixes the responsive design behaviour on mobile devices

Improving The Views

14. What about the other views in this application? There’s a lot that Twitter Bootstrap provides that can improve the look of the scaffold-generated code we have. First we’ll add a few product records so that we have some more content to work with.

1. Next we’ll use Twitter Bootstrap to improve the look of this page. Instead of walking through each change manually we’ll use one of the generators provided by the gem. This generator is called themed and is designed to work on top of scaffolding so we need to pass it the name of a scaffold. We also pass in the -f option to force it to overwrite the generated view files.

   16.Similar changes have been applied to the pages for viewing and editing a single product. We can view the source for these templates to see exactly how this works. 

   A couple of CSS classes have been added to the table that displays the products. Similarly classes have been added to the “Edit” and “Destroy” links to improve their look. The biggest change has happened to the partial that contains the form for creating or editing a product.

   The code in here has changed significantly from the scaffolding code and it serves as a nice example as to how you can get a form to look really good with Twitter Bootstrap.

We’re nearing the end of this episode now and we said we’d mention some alternatives to the twitter-bootstrap-rails gem. There’s a list of these in this article on Ruby Source which explains how Twitter Bootstrap works and shows the various options and gems that are available for integrating it with Rails.