【相關視頻推薦：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.移動優先
為了確保適當的繪制和觸屏縮放，需要在 <head> 之中添加 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.表格
在傳統的<b>table>tr>td</b>的基礎上添加類名即可使用bootstrap提供的表格特效
基礎表格：
<table class="table"></table>
在<b>.table</b>的基礎上，再增添以下下類名，可增加相應的效果
.table-bordered 帶邊框的 .table-striped 帶條紋的 .table-hover 鼠標懸停 .table-condensed 緊縮表格 單元格內的padding值減半
狀態類 通過這些狀態類可以為行或單元格設置顏色
.active 鼠標懸停在行或單元格上時所設置的顏色.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>
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
