bootstrap教程整理-起步+CSS基礎

自學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.移動優先

為了確保適當的繪製和觸控螢幕縮放，需要在 之中添加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.表格

在傳統的table>tr>td的基礎上添加類別名稱即可使用bootstrap提供的表格特效

 基礎表格：

 <table class="table"></table>

在< ;b>.table的基礎上，再增加以下下類別名，可增加對應的效果

.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中文網其他相關文章！