BootStrap,bootstrap教程
<script src="jquery.1.9.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-theme.min.css"><h2>Files Required</h2><h3>1.jquery.js</h3><h3>2.bootstrap.min.js</h3><h3>3.bootstrap.min.css</h3><h3>4.bootstrap-theme.min.css</h3><body><h3>Table</h3><p>1.Basic Table & Bordered Table</p><table class="table table-bordered"><th>Table Header</th><th>Table Header</th><th>Table Header</th><th>Table Header</th><th>Table Header</th><tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr></table><p>2.Hover Rows </p><table class="table table-bordered table-hover"><th>Table Header</th><th>Table Header</th><th>Table Header</th><th>Table Header</th><th>Table Header</th><tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr></table><p>3. Colored Rows</p><table class="table table-bordered"><th>Table Header</th><th>Table Header</th><th>Table Header</th><th>Table Header</th><th>Table Header</th><tr class="active"><td>Style -- Active</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr class="success"><td>Style -- Success</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr class="warning"><td>Style -- Warning</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr class="danger"><td>Style -- Danger</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr><tr class="info"><td>Style -- Info</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr></table></body>
Bootstrap裡的檔案分別表示什?都有什用?
bootstrap.css 是完整的bootstrap樣式表,未經壓縮過的,可供開發的時候進行調試用
bootstrap.min.css 是經過壓縮後的bootstrap樣式表,內容和bootstrap.css完全一樣,但是把中間不必要的空格之類的東西都刪掉了,所以檔案大小會比bootstrap.css小,可以在部署網站的時候引用,如果引用了這個檔案,就沒必要引用bootstrap.css了
bootstrap-responsive.css 這個是在對bootstrap架構應用了響應式布局之後所需要的CSS樣式表,如果你的網站項目不準備做響應式設計,就不需要引用這個CSS。
bootstrap-responsive.min.css 和bootstrap.min.css的作用是一樣的,是bootstrap-responsive.css的壓縮版
bootstrap.js 這個是bootstrap的靈魂所在,是bootstrap的所有js指令的集合,你看到bootstrap裡面所有的js效果,都是由這個檔案控制的,這個檔案也是一個未經壓縮的版本,供開發的時候進行調試用
bootstrap.min.js 是bootstrap.js的壓縮版,內容和bootstrap.js一樣的,但是檔案大小會小很多,在部署網站的時候就可以不引用bootstrap.js,而換成引用這個檔案了~~
這樣你應該就可以理解了吧~~^_^
Bootstrap裡的檔案分別表示什?都有什用?
bootstrap.css 是完整的bootstrap樣式表,未經壓縮過的,可供開發的時候進行調試用
bootstrap.min.css 是經過壓縮後的bootstrap樣式表,內容和bootstrap.css完全一樣,但是把中間不必要的空格之類的東西都刪掉了,所以檔案大小會比bootstrap.css小,可以在部署網站的時候引用,如果引用了這個檔案,就沒必要引用bootstrap.css了
bootstrap-responsive.css 這個是在對bootstrap架構應用了響應式布局之後所需要的CSS樣式表,如果你的網站項目不準備做響應式設計,就不需要引用這個CSS。
bootstrap-responsive.min.css 和bootstrap.min.css的作用是一樣的,是bootstrap-responsive.css的壓縮版
bootstrap.js 這個是bootstrap的靈魂所在,是bootstrap的所有js指令的集合,你看到bootstrap裡面所有的js效果,都是由這個檔案控制的,這個檔案也是一個未經壓縮的版本,供開發的時候進行調試用
bootstrap.min.js 是bootstrap.js的壓縮版,內容和bootstrap.js一樣的,但是檔案大小會小很多,在部署網站的時候就可以不引用bootstrap.js,而換成引用這個檔案了~~
這樣你應該就可以理解了吧~~^_^