前端技術——bootstrap

bootstrap

 

Web框架

 

http://how2j.cn/k/boostrap/boostrap-tutorial/538.html#nowhere

 https://www.bilibili.com/video/av29299488/?p=26

 

使用：

1.導入Js和css

a.導入bootstrap的開發環境

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<script src="js/bootstrap.js"></script>

b.導入jq的引入

<script src="js/jquery.min.js"></script>

 

1、基本樣式

1.按鈕：

2.表格

3.圖片

4.表單

5.文本

6.背景

7.其餘

8.柵格佈局

ex:

<div class="container">
    <div class="row">
        <div class="col-xs-4 ">1/3</div>
        <div class="col-xs-4 ">1/3</div>
        <div class="col-xs-4 ">1/3</div>
    </div>
</div>

 

2、組件

1.添加小圖標

2.下拉菜單

3.按鈕組 

4.按鈕組下拉菜單

5.輸入框組

6.導航欄 （麪包屑導航）

7.分頁設計

8.標籤

9.超大屏幕

10.副標題

11.縮略圖

12.警告

13.進度條

14.組列表

15.面板

16.頂部底部

 

3、插件

1.模態窗口

2.可切換導航欄

3.提示工具

4.摺疊

5.輪播