用Bootstrap搭一個響應式的小網(wǎng)站
時間：2023-05-09 18:00:02 | 來源：網(wǎng)站運營
時間：2023-05-09 18:00:02 來源：網(wǎng)站運營
用Bootstrap搭一個響應式的小網(wǎng)站：最近在學Bootstrap，秉持“以做帶學”的信念，做個響應式的小網(wǎng)站練練手。
這個小網(wǎng)站是一個D3js的學習網(wǎng)站，扁平化風格，核心內(nèi)容是十五種交互式圖表的展示模塊與學習資源鏈接模塊，其中的Demo展示頁包含了圖表的渲染與代碼及數(shù)據(jù)文件的展示，而學習資源鏈接模塊則總結(jié)了D3js學習的各種渠道信息和資料。
網(wǎng)站中數(shù)據(jù)可視化的代碼和資源信息主要參考書籍《D3API詳解》和d3.js官網(wǎng)，收集并在本地修改和添加了一些內(nèi)容，該網(wǎng)站僅僅作為自己學習的目的，不會部署到網(wǎng)上。
先看看首頁效果：其中的demo模塊是核心：點開其中一個圖chord查看詳情頁：
1、圖：2、圖下能看到代碼和數(shù)據(jù)文件：后邊的Source模塊總結(jié)了許多資源鏈接：
響應式設計：實現(xiàn)主要使用了Bootstrap中bootstrap.css里的媒體查詢接口：如下圖所示便是去寫對應屏幕寬度在768px到991px之間的樣式。
效果：我使用了一個叫Viewport Resizer的chrome插件作為響應式開發(fā)工具，使用它能查看網(wǎng)頁在不同設備上的展示效果。
下面是我網(wǎng)站首頁在ipone5和ipad中的效果：我把這個網(wǎng)站的源碼放到Github上了，附上源碼地址
。
在線咨詢