bootstrap今天的學習心得

今天花了一個下午加晚上的時間研究了bootstrap,收穫仍是不少,首先是進入官方網站http://twitter.github.io/bootstrap/。也有中文的網站,因爲我的英文很差,因此就是登陸的中文網站http://www.bootcss.com/ javascript

首先我是把點擊了入門指南,大概介紹了bootstrap主要包含的那些內容,咱們能夠用的。 css

第一確定是下載

而後就是目錄介紹,由於bootstrap是個輕量級的框架,目錄不是不少,因此很容易理解,主要有用的就是三個文件,bootstrap.js,bootstrap.css,bootstrap-responsive.css(是響應是佈局才須要引入的css)。很簡單,要用全部的功能,就所有引入本身的html頁面裏面。而後還能夠看一看它官方給出的一些模版,固然模版咱們參考就是了,copy是沒有意義的。 html

第二步是研究了scaffolding

這個是bootstrap的佈局相關的,bootstrap的佈局很簡單,只要在你的div裏面加上class屬性,而後再把bootstrap.css裏的class加上去就可以實現佈局了,很簡單,介紹兩種很流行的佈局,流體佈局和響應事佈局,都是基於bootstrap的柵格系統 java

貼上一段代碼 git

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>
響應事佈局須要引入下面兩端代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
而後就能夠進行本身的響應時佈局了,而後能夠經過如下一些類來判斷不一樣的屏幕寬度來對應顯示到瀏覽器最佳的內容,能夠經過這些類來進行選項

是否是很簡單。 github

基本的css樣式

包括了 bootstrap

  • 排版
  • 代碼
  • 表格
  • 表單
  • 按鈕
  • 圖片
  • 圖標
這些不管從實現仍是理解上都是很簡單的,只須要把bootstrap.css裏的類放到你的標籤的class裏面就能實現很好的佈局效果了

接下來是一些基本的組件

列表目錄也就不用詳細寫了,由於和基本的樣式是樣的,最主要的是這個bootstrap是很漂亮的 瀏覽器

而後就是javascript插件

這個插件用起來仍是很簡單,只須要在一些如tab,nav,彈框啊,下拉框啊,這些帶有事件的組建的實現動態效果,簡單的說,也很簡單,只要拿到class就能拿到節點,而後用bootstrap封裝好的方法調用一個方法就可以輕鬆的實現了。 框架

下載bootstrap是簡單的,也能夠按你須要的模塊進行下載, less

後面是lesscss

這個我也沒具體的看,有點高端,可是很強大...加油吧,今天收穫不少,還研究完了javascript密碼花園裏的js常見的錯誤,和容易忽略的問題。學到不少經驗,總的來講今天是有收穫的,雖然今天地震了,心情很沉重,逝者安息!

相關文章
相關標籤/搜索