自學Bootstrap的時候,是跟著官網文檔學的。官網寫的其實很清楚完整,但對於前端的初學者來說,其實還是有很多零零散散的知識點可以除去暫時不看的。
【相關影片推薦:Bootstrap教學】
所以在此將其中的知識點刪刪減減的做了一個小總結,希望在「入門」這個方面能幫到你。
bootstrap筆記-起步CSS基礎
一、開始
#1.引用
透過官網下載,或透過bootCDN提供的CDN服務,又或透過cdnjs提供的CDN服務引用一下文件
bootstrap.min.css bootstrap.min.js
在引用bootstrap.min.js之前需要引用jquery
jquery.min.js
CDN服務
https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js
引用我們文件的時候,建議寫在body標籤內容的最下面
… <bdoy> … <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> </body> …
2.移動優先
為了確保適當的繪製和觸控螢幕縮放,需要在93f0f5c25f18dab9d176bd4f6de5d30e 之中添加viewport 元資料標籤。
<meta name="viewport" content="width=device-width, initial-scale=1">
在行動裝置瀏覽器上,透過為視窗(viewport)設定 meta 屬性為 user-scalable=no 可以停用其縮放(zooming)功能。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
如果想弄清楚以上程式碼的具體內容,想完全搞清楚移動像素的問題。推薦去慕課網看一下WEB移動的課程
二、CSS排版佈局
1.佈局容器
內容容器,寬度進行了固定(左右有間距)
<div class="container"></div>
內容容器,寬度為100%
<div class="container-fluid"></div>
2.柵格系統
柵格化系統,將螢幕寬平均分成了12份,div佔多少份,就在class裡面寫什麼數字
比如
class="col-md-12"
針對於不同的螢幕大小,分成了四大類,分別是:
.col-lg-大屏幕 >1200px .col-md-中等屏幕 992px~1200px .col-sm-小屏幕 750px~992px .col-xs-超小屏幕 <750px
html:
<div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div> <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div> <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div> <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div> </div> </div>
css:
<style> div[class^="col"]{ outline-offset: 1px; outline:1px solid red; } </style>
3.排版-標題
<mark></mark> 标记标签 <small></small> 小文本标签/副标题标签
4.排版-程式碼
<kbd></kbd> 标记通过键盘输入的内容 <code></code> 标记代码内容
5.表格
在傳統的a4b561c25d9afb9ac8dc4d70affff419table>tr>td0d36329ec37a2cc24d42c7229b69747a的基礎上添加類別名稱即可使用bootstrap提供的表格特效
基礎表格:
<table class="table"></table>
在< ;b>.table0d36329ec37a2cc24d42c7229b69747a的基礎上,再增加以下下類別名,可增加對應的效果
.table-bordered 带边框的 .table-striped 带条纹的 .table-hover 鼠标悬停 .table-condensed 紧缩表格 单元格内的padding值减半
狀態類別 透過這些狀態類別可以為行或儲存格設定顏色
.active 滑鼠懸停在行或儲存格上時所設定的顏色.success 滑鼠停留在行或儲存格上時所設定的顏色.success 標示成功或正向的動作.info 標示普通的提示訊息或動作.warning 標示警告或需要使用者註意.danger 標示危險或潛在的帶來負面影響的動作
6.情境顏色(文本,按鈕,背景等等)
顏色在之後的學習中很多地方都會用到
-default; 默认 -primary; 首选项 -success; 成功(一般用于表达积极向上) -info; 信息 -warning; 警告 -danger; 危险
7.按鈕
通常我們用input或button標籤寫表單按鈕,也會用a標籤仿寫按鈕。
<a class="btn btn-danger" href="">百度一下</a> <input class="btn btn-danger" type="button" value="按钮2"> <button class="btn btn-danger">按钮3</button>
按鈕有以下幾種皮膚,或者說是主題,或簡單稱之為顏色吧:
btn-default; 默认 btn-primary; 首选项 btn-success; 成功(一般用于表达积极向上) btn-info; b 信息 btn-warning; 警告 btn-danger; 危险 btn-link; 连接(a标签的方式)
8.三角符號
透過使用三角符號可以指示某個元素具有下拉式選單的功能。注意,向上彈出式選單中的三角符號是反方向的。
<span class="caret"></span>
9.關閉按鈕
透過使用一個象徵關閉的圖標,可以讓模態框和警告框消失。
<button type="button" class="close" > <span>×</span> </button>
以上是bootstrap教程整理-起步+CSS基礎的詳細內容。更多資訊請關注PHP中文網其他相關文章!