Tip:
Highlight text to annotate it
X
>> NEEL MEHTA:所以打招呼 大家誰是這裡觀看,
或者觀看在線或遠程。
我的名字是尼爾,這是CS50。
而今天的研討會是響應 網頁設計與引導。
這是一個主題,就是 非常接近我的心臟。
我們希望,這將是 接近你的心臟
以及通過今天的研討會結束。
所以引導。
你們有多少人做過任何 類型的Web開發過嗎?
量好?
一點點。
>> 所以引導是世界上最 流行,前端框架。
它的使用by--我選擇一個 情侶隨機websites--的
Lyft,新聞周刊和時尚。
它的使用由多個網站。
這是一個網頁設計的框架, 將讓你讓你的網站
既美觀又響應。
我走在這些 兩個概念在這裡。
美麗。
所以,你必須對正常的網站 左側,這是由只用HTML製作。
你在課堂上所學到的HTML 並在長度部分。
引導是一種方法,使 你的網站美觀。
你可以採取什麼是對的 屏幕左側
並把它變成什麼的 屏幕右側的非常,
非常,非常少的代碼。
>> 你得到不錯的藍色按鈕,可以得到 花哨,圓邊在屏幕上,
你得到的列表視圖中,你得到的 卡,等等用很少的代碼。
實際上有沒有的CSS 你必須自己來寫。
因此,引導可以讓你 有這些預建的CSS
組件可以把 你的網頁內
使它看起來漂亮不 你自己非常多的工作。
這的確是一個引導, 出發點,
為您的Web開發的冒險。
所以,當你剛 嘲諷了一個網站,
這是一個很好的地方開始。
你可以得到一個很好看的網站 有非常,非常小的工作。
事實上,我們要去 要做到這一點我們自己
在像五場 minutes--在10分鐘內。
所以這是很容易 做一些偉大的網站。
所以這是第一部分。
>> 第二part--響應。
人們,如今,不只是 訪問他們的筆記本電腦的網站。
事實上,截至2014年,越來越多的人 通過移動設備訪問網絡,
像電話,或片劑,或 服務,或等比網站。
和網站歷來 設計有筆記本或台式機
心裡。
這樣一來,網站往往不能 非常適合您的手機。
如果你曾經訪問過 harvard.edu您的手機上,
它是一種惱人的對 經驗,對不對?
這是因為它是沒有反應。
我們正在努力使 網站的響應,
以回應人們的屏幕尺寸。
>> 所以,如果它是一個手機,它的 要去的電話。
如果它是一個平板電腦,它的 要去的平板電腦。
它調整以匹配 屏幕正被使用。
所以引導還提供了一些 非常非常有用的工具了點。
而我們將討論這一點。
如此反复,有兩部分 Bootstrap--美麗的和負責任的。
我們要談那些。
首先,美不勝收。
然後響應。
>> 因此,所有的我們的代碼 要談論today--
我們將有很多的例子, 很多挑戰,所以on--它
所有居住在這個網站在這裡。
這張幻燈片是我們送出。
所以,如果你在這裡,你可以感受到 自由不必寫下來。
如果你是遠程觀看,感覺 免費拉這個您的計算機上
為好。
你可能在需要它 本次研討會的過程。
>> 因此,我們將使用 網站名為CodePen,
這是一個協作編碼 環境,本次研討會期間。
而CodePen--我會 告訴你這裡真正的fast--
它可以讓你寫 HTML協作。
我可以寫,我可以把它送到 你們,你們可以對其進行編輯。
即使你是遠程的, 仍然可以訪問這種方式。
您可以在輸入HTML代碼 頂部,它會自動
被轉換成 網頁底部。
因此,它是一種讓你 快速嘗試代碼
無需做任何形式的東西 在你的IDE,或者您自己的網站,
或什麼的。
>> 因此,繼續前進,並拉起該 網站,如果你是遠程
或者,如果你在這裡, 特別是如果你的遙控器。
is.gd/cs50boostrap。
無上限,無底線,什麼都沒有。
所以,你們誰是 在這裡,只要給我一個大拇指
若你已經退出 了該網頁。
好?
>> 聽眾:是的。
>> NEEL MEHTA:所以我們會得到 到,在短短一秒鐘。
因此,首先,我們要得到,怎麼 你讓你的網站的美麗?
我們要學習如何採取無聊, 舊的HTML,像我以前向你展示,
並把它轉換成 非常好的成分,
喜歡漂亮的小部件,漂亮,彩色 按鈕,和標籤,和表,
和所有的,使用引導。
所以,如果我們都可以去到的 CodePen您剛剛拉起。
它應該看起來有點像這樣。
它看起來像這樣給大家?
>> 聽眾:是的。
>> NEEL MEHTA:如果你是遠程的,它 應該是這樣的為好。
如果沒有,我會很快如何告訴你 你可以得到它看起來像這樣
在視頻的未來部。
所以在這裡我們寫 一個非常基本的HTML,
喜歡那種你已經 用在課堂上被。
這是非常基本的。
沒有多餘的裝飾。
我們有一些東西。
我們已經設計了一個非常, 非常基本的啟動
來電Yalp!使用它你可以 發現餐館在該地區,
並找到評論,和 方向上的所有這些。
這是一個非常好的概念。
這是從來沒有做過的事情。
這是一個非常獨特的名字了。
>> 因此,我們要嘗試什麼 做的是幫助主人
的Yalp!使他的網站 看起來真的,真的很酷。
因此,首先,所有者 Yalp!做了一個小的搜索
框和一個小按鈕, 然後也許有點
高亮區域的 高亮的餐廳,然後
其他餐館列表 是在該地區。
因此,我們可以只通過 HTML代碼實快。
怎麼舒服你是人與HTML?
我們已經做了一點點 部以及在類。
體面?
>> 因此,只是作為一個回顧, HTML是所有關於獲得
告訴標籤或元素 電腦如何佈局網頁。
所以這個H1這裡 - 開始H1,歡迎 以Yalp!到底h1--告訴計算機,
畫上一個大大的頭就 說,歡迎Yalp!
在裡面。
我們也有形式。
我們可以輸入這樣,文本輸入框, 這將呈現為文本框
你寫的研究。
你也有按鈕。
你得到一個不錯的,可點擊的按鈕。
它沒有做任何事情的權利 現在,但你得到一個按鈕。
你可以有申報單,或隔板,以 打破你的頁面到各個群體。
>> 你可以有段落, 你有按鈕。
如果你有幾段,然後 你有無序列表,UL,
而且,李內部列表。
所以這些都是非常基本的 網頁的積木。
事實上,相當多 每一個網站你看
將被建 使用這些相同的工具。
當然,他們並不都 看這不好,因為我們是
將香料它一點點。
因此,讓我們這無聊的老HTML和啟動 把它變成美麗的網站
我們只是一對夫婦分鐘前看到的。
>> 因此,讓我們開始很簡單。
所以,我們在這裡有這個按鈕。
在引導,正如我們所看到的,我們可以 有一個很好的,美麗的,藍色按鈕。
這就是做自定義CSS功不可沒。
這裡有沒有自定義CSS。
這是通過添加類完成 你的HTML元素。
如果你已經嘗試過班,或的HREF,或 錨,或類型=“文本”的inputs--
HTML元素具有這些屬性。
他們可以有額外的信息 你可能給他們。
>> 因此,在這種情況下, 類的屬性。
所以,你會寫,按鈕類= 東西串內。
而該屬性將告訴 計算機,這不是任何老按鈕。
這是一個按鈕,在 這個類的按鈕。
因此引導,如果你給它 某種風格的元素,
它會畫它以某種方式。
所以我寫“BTN BTN小學。
BTN是一個縮寫按鈕。
你現在會發現 我的醜按鈕關閉
成一個漂亮的,漂亮的,藍色按鈕。
它看起來很不錯,當我們點擊它。
>> 所以會發生什麼是我們擁有的 BTN類和BTN-初級班
我們的元素。
和引導會去說,OK,我 知道有這兩個類。
有這兩種的任何元素 類應該得出這樣的。
這就是你如何連接的核心 樣式以引導要素。
你只需將類,對他們 它認為合適的,將重量不出來。
因此,這裡是另一個例子。
在輸入,我們可以添加 一類=“形式的控制”。
我會告訴很快,你 可以找出哪些類
可用各種元素的。
但類我們剛剛 增添了美觀大方,圓潤的邊角,
它有很好的填充,它有 一個漂亮,藍色的光芒吧。
>> 我們也可以進入這個形式。
而類=“形式的內聯”,這將使 我們的形式,如你所想,行內。
所以它看起來有點多 就像我們之前已經有了。
因此,在我們繼續之前的風格的休息 頁面,關於什麼什麼問題,我們
沒有?
我們只是附加類 我們的各種元素。
而再告訴你如何能 找出什麼類可用。
我們連接類 有一定的風格。
這告訴瀏覽器 如何使用佈局的頁面
引導的提供方式。
從觀眾的任何問題?
>> 好這麼遠嗎?
涼。
很多的挑戰 與引導只是
知道哪些部件是 可用以及如何使用它們。
,這是所有教訓 有經驗,也
通過閱讀文檔, 我們將談論很快。
因此,我們有這個分區。
這只是一個無聊的,舊的東西。
我們希望以某種方式強調這一點。
因此,在自舉,有一 很多可用的組件。
這是getbootstrap.com。
這是一個非常有用的參考。
它包含的東西like-- 這裡是你如何做一個按鈕。
你可以做導航欄,你可以 標籤,你可以進步吧,
你可以做列表組。
基本上,它是各種 你可能會看到一個網頁。
>> 這裡有一個,我們會盡力現在。
這就是所謂的面板。
如果你使用谷歌 現在,他們有點卡。
或者任何Android設備有卡。
他們有白色的小盒子 有東西在它的內部。
所以我們要嘗試做 那我們在這裡使用的東西
稱為面板。
因此,如果我們重視階級=“面板 面板默認“我們的外格,
那麼,我們附上一個div類= - 讓我們 只要檢查該文件。
DIV CLASS =“面板標題”和 然後DIV CLASS =“面板體”。
再次,不要擔心 記住此代碼。
這將是在網上提供。
>> 所以我們這樣做,現在我們無聊,老 格變成了這個可愛的,小卡片。
它有很好的填充,它會 有邊界的,它代表了
從頁面的其餘部分, 這是很酷。
因此,讓我們去和改變這種獲取 方向鍵好看。
誰在台下要告訴 我有什麼我可以做的按鈕
以使它看起來不錯用引導?
是?
>> 聽眾:我們可以添加一個類。
我們可以做類=“BTN BTN小學”。
NEEL MEHTA:是的。
還有一堆其他的 可buttons--顏色
或任何東西,對這一問題。
我們可以做的BTN-危險,使紅色。
在那裡,我們走了。
我們可以做的BTN-的成功,使其綠色。
我們可以做的BTN-info--有一堆 事情是提供給您。
所以,我有一點挑戰,你現在。
因此,有一件事 我已經離開聯合國風格。
這個頂級餐廳。
>> 我們要使用的東西 所謂的清單組的風格吧。
所以,我向你挑戰是 去到getbootstrap.com--
我會在這裡把它向上。
getboostrap.com。
去getbootstrap.com,找到 部分,在那裡他們走了過來列表組。
你會看到這裡的 例和右類
你可以用它讓你 名單到這些漂亮的列表組。
這些都制定了實例 代碼示例,什麼
代碼你用什麼HTML代碼 你用的,什麼輸出。
>> 所以我挑戰你 - 去getbootstrap.com,
無論你是在這裡還是在家裡,和 嘗試並添加樣式這個UL
以使它看起來不錯。
並用一個列表組的風格。
你想需要幾分鐘時間, 和搜索文檔,
試試這個呀?
因為當你在做網站開發, 你會發現很多你的工作
將要被讀出 此文件。
所以我認為這是很好的熟悉 與如何閱讀文檔,
如何找出什麼是在哪裡, 什麼樣的代碼示例,您可以使用,
您可以利用的東西。
>> 如此反复,getbootstrap.com, 轉到組件選項卡,
然後向下滾動到列表組。
你會看到的代碼示例 你可以用它讓你的HTML適合的。
所以需要幾分鐘, 嘗試和探索自己,
無論你是在這裡還是在家裡。
如果你在家裡,暫停視頻, 也許和自己試試它了。
如果你在這裡,如果你去我們 如果你刷新頁面website--,
你會看到這對那裡。
這非常相同的代碼僅僅是 增加新的款式就在那裡。
所以需要幾分鐘的時間。
讓當你感覺良好的我知道, 它或者當你完全失去了。
聽起來不錯?
涼。
快速拋開對於那些你 在家裡,在我們等待,
如果你去到GitHub的網站 我忍了一對夫婦幻燈片前,
朝著視頻的開始, 我有一個GitHub庫,資源庫,
對於這次談話。
所有這些代碼示例,我們會 談到存儲在這裡。
因此,如果你去挑戰,1.HTML,這 是所有我們現在所擁有的代碼
我們CodePen。
所以,你可以去進取,複製 這一點,並將其粘貼在自己的CodePen。
而這樣一來,你能跟上 與我們在這裡做。
所以有這個頁面開放,以及我們 通過本次研討會的其餘部分。
同樣,你希望它看起來像你 看到倒在你的屏幕的底部
那裡。
感覺不錯?
固體。
讓我們等待其他人來 與他們在做什麼完事。
>> 是?
>> 聽眾:假設,我想 使用引導在home--
NEEL MEHTA:是的。
聽眾:我明白了,在網站上, 入門頁面。
他們給我的選項 引導,源代碼,或者薩斯。
哪一項做我想要什麼?
>> NEEL MEHTA:是的。
所以現在的問題是,你如何獲得 開始使用引導我們自己?
它只是碰巧 神奇的工作就在這裡。
因此,如果我們有時間 研討會結束後,
我會告訴你,你怎麼能 得到它自己的網頁。
喜歡這裡,我實際上 把一些設置
會自動把它 裝,但我會
告訴你從做 劃傷自己的網頁。
>> 聽眾:謝謝。
>> NEEL MEHTA:是的。
好問題。
感覺不錯?
感覺不錯?
涼。
那麼,誰願意告訴我,他們是如何做 這東西看起來不錯,Boostrappy?
什麼是我們添加到UL一流?
聽眾:類=“列表組”。
NEEL MEHTA:是的。列表基團。
然後我們怎麼附加到LIS?
其他人?
聽眾:然後,過 即中,class =“清單組項目”。
>> NEEL MEHTA:是的。
>> 聽眾:而且它的 同為下一個。
>> NEEL MEHTA:李類=“清單組項目”。
你去那裡。
我們有很好的列表組, 就像我們此前的預期。
所以你去。
在10分鐘內,我們已經取得了 這無聊的,老Yalp!頁
看起來不錯,專業。
而這僅僅是個開始。
所以,現在你感覺 良好,讓我們
只是繼續前進,談談 一對夫婦更組件
可能會派上用場,你 走在你的冒險之旅。
>> 當然,還有很多的人在這裡。
現在您已經了解了 怎麼辦列表組,
你幾乎可以教 自己如何做這些。
但是,當然,我們只是嘗試 做一對夫婦更自我,
只是讓你感受一下 如何使用它們。
我只是要去 這裡本實施例。
此外,該代碼,我只是粘貼 在這裡就在這裡。
所以隨意把它拉起來。
>> 因此,我們通過已經走了 幾個這些例子。
因此,我們有按鈕,這是我們 已經知道該怎麼做。
我們可以讓按鍵較大。
通過按鈕分類 - 不言而喻,BTN BTN-LG 而BTN-默認使得它的白色。
因此,這使得我們的按鈕更大 比它本來可能。
它可能會派上用場,如果你有 大的提交按鈕什麼的。
我們看到列表組的例子, 我們看到的形式例子。
>> 其中很重要的一項就是圖標。
和圖標的方式為你增添 有趣的東西,比如檢查檢查
標記或加號,或者朋友 圖標,或重新啟動圖標,
或任何你的web應用程序。
如此反复,如果我們到這裡, 的組件,glyphicons,
可用於自舉的圖標。
有一個詳盡的 這裡所有的人名單。
所以只是作為一個例子, 讓我們試著添加一個。
>> 所以像Facebook,我們要努力 有一個添加好友按鈕。
讓我們先添加一些樣式。
按鈕類=“BTN BTN-成功”。
還有,我們走了。
讓我們在這裡添加一個圖標。
什麼圖標,你認為, 可能是有意義的放在這裡?
你可能已經看到了 某些網頁也好,
但什麼是圖標的一個例子, 這個按鈕內部可能順利?
隨意瀏覽這個觀點, 如果你需要任何靈感。
有很多有用的 可在這裡的。
是?
>> 聽眾:也許glyphicon用戶嗎?
NEEL MEHTA:OK。
這個。
這是相當不錯的。
是。
在Facebook上,我認為這 看起來有點像。
因此,這裡是我們如何去 增加圖標到我們的網頁。
我們只是有一個span--跨度是 中性容器的東西。
一個DIV是一個容器的東西, 跨度是另一個容器。
div的有換行符 在他們身邊,跨度不。
因此,有不同的方式 有通用的容器。
喜歡的話沒有任何意義,把它 裡面一個段落或什麼的。
我們必須把它 雖然裡面的東西,
所以我們只要把跨度內。
因此,跨度類= glyphicon glyphicon用戶“關閉跨度。
而我們現在有 內按鈕圖標。
>> 所以它看起來並不完全不像 你可能會在facebook.com上看到的。
所以這是很好的,這些可以 你想其實放在任何地方。
在你的頭吧, 在列表中組。
隨你。
它並不必須是 裡面的一個按鈕。
因此,作為一個例子,我可以 把同一類在這裡。
“glyphicon glyphicon用戶”。
它出現一樣的。
因此,這些icons--可以使用範圍 類=“glyphicon glyphicon-什麼”。
這將讓你添加 不管你想要的圖標。
和圖標是一個非常重要的 做一個網站外觀的一部分
專業,做得很好。
所以,不要過分,但它 往往是一個好東西就知道了。
>> 面板,再次。
我只是再次做到這一點作為一個回顧 因為一種他們參與。
你會發現,在 把你的普通HTML
網站成為一個引導,afied 網站,您將有
到額外的結構添加到網站。
例如,我們有額外的 資料核實在這裡只是因為那些
需要使一個面板。
因此,只要記住這一點是 你必須有額外的結構。
因此,“面板面板默認”。
也許這是面板頭。
我認為它的面板標題。
是。
在那裡,我們走了。
所以,再有就是我們的面板。
>> 還有一件事,我們 沒有涵蓋的是,表。
表,默認情況下看那種難看。
喜歡這個。
但表是的,當然, 一個非常重要的組成部分
什麼,你會做Web開發。
在Pset7,例如,CS50 金融,這將問世不久,
你會使用大量的表。
和很多Web開發中使用了大量 來顯示信息的表,
像股票一樣,或得分,或什麼的。
>> 所以樣式表其實是很容易的。
您添加表類的表。
而且,我敢說,它看起來相當不錯。
你可以做額外的東西, 如“表的表條紋”。
你會在這裡看到的結果。
你可以做表接壤。
有很多選擇,你可以。
但基本上,增加了 表,表類,
會讓你的表看起來相當不錯。
所以這是一個簡短的破敗 一些更重要的樣式
和組件,你會 需要使用的引導。
所以我認為,包裝 我們的美麗的一部分。
如有任何問題,現在怎麼 使你的網站美觀?
你可以如何使用這些 組件到你的優勢在哪裡?
感覺不錯?
是?
聽眾:也許這 是一個愚蠢的問題,
但你可以在維基百科上使用引導程序?
如果您正在編輯一個維基百科頁面?
NEEL MEHTA:是的。
所以,問題是,我 編輯維基百科頁面,
我可以包括有引導的風格?
>> 聽眾:是的。
>> NEEL MEHTA:所以引導是 基本上是一個大的CSS樣式表。
CSS樣式表只是說,當 我有這個類,重視這些樣式。
所以,CSS樣式表引導 將是類似.btn,
Button類,會得到像 圓角邊框或別的什麼東西。
所以基本上,只是一個引導它 一堆類和一堆風格
這些類指定。
所以只要你有CSS, 在你的頁面上的規則列表中,
你會得到引導的造型。
即,當然,取決於 具有引導風格在你的網頁
開始。
>> 因此維基百科, 你可能不能
這樣做,因為維基百科 不具有自舉在它。
但是,如果它確實有引導, 你也許可以做到這一點。
如果你願意,你可以 包括它,但可能
打破頁的現有佈局。
但是非常好的問題。
您可以使用引導 無論它是包含,
但它不是默認情況下內置的。
>> 聽眾:謝謝。
>> NEEL MEHTA:是的。
還有什麼問題嗎?
是。
所以,無論你是在這裡還是在家裡, 只記得getboostrap.com--再次,
getboostrap.com--是你的朋友。
每當你使用 引導,這會給你
有關如何獲取指令 開始,如何使用組件。
有一些很酷的JavaScript 插件,我們不會在這裡,
但他們是值得一試為好。
因此,這是你的朋友。
拿到這只是重要 用於如何使用這個。
>> 因此,讓我們聊了一些有關 使得響應網站。
因此,正如我之前所說的,人們習慣 他們的筆記本電腦,他們使用自己的手機。
正如你可能想像,這是 一個非常不同的屏幕尺寸比。
這樣一來,同一個網站 看起來不錯我的電話
是不會好看, 必要地,在計算機上。
所以,你需要做的是什麼 使你的網站適應。
它必須適應各種 屏幕尺寸,它的上。
>> 它說,我知道我在 計算機,一個大的筆記本電腦,我應該擴大。
我知道我的電話,我應該縮小。
所以引導提供了一些 非常非常有用的工具來做到這一點。
因此,引導我們你打破 一個網站到12列。
您可以行有12列。
你可以分區 這些不過你想要的。
你可以有一個,大的事情, 這是12列寬。
你可以有兩件事 是各6個。
你可以做一件事,就是四, 一說是兩個,一個是六人。
你可以做三,三,三,三。
你可以做任何 要崩潰。
>> 因此,也許你的網頁需要有一個 左邊的列那三分之一的寬度。
因此,這將是四列 寬和所述網頁的其餘部分
將八列寬。
因此,這是一個例子。
讓我們拉起另一個例子。
>> 聽眾:請問它總是 必須是偶數分裂?
難道是七,五裂?
>> NEEL MEHTA:是的。
這可能是七分,五分。
是。
只要把它添加到12,它的罰款。
所以,讓我們回到這裡。
再次,該代碼是 這裡也可在這裡,
根據響應的例子。
於是我就拉了一些 這裡例如響應代碼。
所以,你用這樣做 一個東西叫做行。
行僅僅是另一個類。
這是你添加到另一種風格的 資料核實,使他們自己的組件。
>> 所以你說,DIV 類=“行”做一行,
給自己的空間,12列。
然後你把列裡面。
所以在這裡,我們COL-XS-6。
不要擔心XS。
我們將在幾秒鐘之談。
但基本上,我們有一個 這為六廣的東西。
我們把它留下。
所以這是左框在這裡。
我們有一件事是 六12列寬。
而一個在右邊。
>> 也只是給品牌 您的DIV往裡面放灰。
所以,這只是所以我們可以 看到他們是截然不同的。
因此本的第一個例子。
它是如何的一個很簡單的例子 將使用您的行和列在這裡。
您可以使用類=“行”定義一排。
然後你做類=“COL-XS-6”嗎 上半年,“COL-XS-6”做另一半。
下面是一個更複雜的例子。
讓我們來看看微小, 巨大的,其餘之一。
>> 我們可以把微小的兩列寬, 我們可以把巨大的六列寬,
其餘的四列寬。
這就增加了12。
所以,這些最終會跨越 頁面的寬度。
同樣,我們外面有一排。
然後我們有DIV CLASS =“COL-XS-2” 然後6,然後4。
並且,將提供 結構我們。
因此,我們可以把任何 到底我們裡面想在這裡。
而不是微小的,我們可以把一個按鈕。
按鈕類=“BTN BTN小學”。
所以請注意,我們的按鈕 不佔用所有的寬度,
但至少它的限制 到大的空間。
>> 所以,這一切都很好。
所以,我們現在可以打破我們的網站 頁面成塊,寬明智的。
我們可以說,我們希望有一個左 柱,和一個右列,依此類推。
但是我們還沒有走了過來 你是怎麼做的回應。
因此引導我們做這一點。
它有這些東西叫做斷點。
因此它具有知道是否一個方式 你在一台筆記本電腦,你是在平板電腦上,
你在手機上的水平, 或者你在手機上垂直。
它知道屏幕尺寸。
而這打破分為四個大類 - 大或LG,這是筆記本電腦,通常是。
MD或介質,它是片劑。
SM,小。
或者XS,超小。
所以,當您指定 一列,你說,
它應該是六欄寬 在一個額外的小裝置。
這就是為什麼我們做COL-XS-6。
我們說,它應該 是六個12列寬
在一個額外的小裝置。
而如果它是更大的事情,我們只 默認使用額外的小尺寸。
如果這是什麼比大 超小,它會為六寬。
因此,我們可以利用 這些使我們的欄目
採取了不同的金額 根據屏幕大小的列。
讓我們去這個響應調整大小。
因此,我們有我們的列。
它說,“COL-LG-6 COL-XS-12”。
因此,考慮你所知道的 到目前為止,你是什麼
認為是要 出現在大屏幕上?
嗯,這是一種 讓位,但做什麼
你覺得它的外觀 喜歡在大屏幕上?
為什麼會這樣?
>> 聽眾:難道 在大屏幕上,這是
將僅拿 充分空間部分?
就像它的一半,我猜?
>> NEEL MEHTA:是的。
>> 聽眾:對體積更小, 屏幕上,它會
要佔用整個屏幕,12。
NEEL MEHTA:是的。
對。
因此,作為一個例子,讓我們 只要看看這兒吧。
是。
因此,對任何東西是LG或 bigger--所以我的電腦發生
被LG的,因為它是 漂亮wide--它將使
它並排,因為它是COL-LG-6。
所以,因為它的大,這使得它 六列寬,寬六列。
讓我們來看看,如果我發生了什麼 使成較小的這一點。
我只是要取消全屏這一點。
而且我要縮小畫面。
我要縮小屏幕,所以它 貌似我是在一個較小的設備。
所以,我要縮小像這樣。
>> 瞧。
它現在層疊 因為現在我們已經
從大的用於:這可能是 一個額外的小屏幕尺寸。
所以現在它說,好吧,我們不 在大,我們在超小的土地。
因此,我們要使用 額外的小尺寸。
而我們將XS-12,XS-12。
所以它會被堆疊。
而就注意到,有 一個東西叫做一個斷點。
斷點是 您所做的過渡
從超小型到小型, 從小到大,等等。
>> 所以剛才注意到當我移動它 出,最終,你會得到點
在那裡他們將通過跳躍一邊是身邊。
你去那裡。
因此,有斷點就在那裡。
因此,我們可以讓它變得更加複雜。
現在我們可以說,這些 事情應該有四個寬。
也就是說,他們應該 佔據約三分之一
在非常大的設備上的講話。
上的媒體裝置,它應 了一半的屏幕,因為它生產的MD-6。
在一個非常小的設備, 它應該承擔12。
所以,這看起來很自然。
讓我們只是嘗試了這一點為自己。
>> 因此,在大屏幕上,他們是第四迭。
縮水了一點點。
而他們現在已屆六寬。
因此,這為六,六,六。
收縮甚至更多,然後 它們將被完全疊置。
所以此,例如,是有意義的,如果 你有卡,如新聞卡,
例如,其中如果 這是一個非常大的屏幕,
這是確定的,如果你有幾個並排 因為他們都得到足夠的空間。
但他們需要有足夠的空間。
因此,在一個小屏幕, 你想給他們
更多的空間的頁的,按比例,。
>> 因此,作為一個現實世界的例子, 假設我們擁有Twitter。
我們有文本框,所以 你可以在Twitter上側。
我們有趨勢的列表 主題的右側。
因此,在大屏幕上,我們應該 讓他們通過側方,
所以你可以看到他們在玻璃上。
但在一個小屏幕, 我們應該做的12和12,
這樣的熱門話題 是的鳴叫區域下方。
因為鳴叫區域是 主要的事情,在小屏幕上,
熱門話題不 此事相當多。
所以我們把它們正下方,所以 它們既可以得到足夠的空間。
有意義這麼遠嗎?
>> 聽眾:是的。
>> NEEL MEHTA:固體。
所以,這一切的例子我這裡。
讓我們嘗試做一個挑戰。
如此反复,這是挑戰-2.HTML為 沿著在家以下這些你。
所以,我的哥們,馬克·扎克伯格, 來找我的一天。
而他的樣子,尼爾,我有 得到在網站設計不錯。
我可以做的HTML。
我做了這個小, 新的編輯到Facebook。
我有怎樣的新思路 我們應該風格的Facebook。
在這裡,它是。
就在這兒。
下面是一些示例代碼。
因此,它被稱為Fancybook。
>> 我們有一些狀態更新。
我們有尼莫,邁克Kosowski, ***--三個狀態更新。
然後我們有一個列表 網友們正確的下方。
於是他做功課。
他知道一點點 引導,他做了列表視圖,
他做的HTML一點點。
因此,他有網頁。
但他的樣子,尼爾,我不 了解響應式設計的。
你有任何的專家誰 能幫助我嗎?
幸運的是,你現在 專家響應式設計。
>> 於是他告訴我的是,他 希望Fancybook看起來像這樣。
在一個非常小的設備, 就像一個電話,一切
應堆放,像在這裡。
所以,你有時間線 前期,往上頂,然後
你應該有 在底部的聊天欄。
但在片劑或介質 裝置,它應該是各佔一半,
作為在時間軸上應 一半的聊天好友列表
應該對的另一半。
>> 然後在一台筆記本電腦,在時間軸 要佔用四分之三
然後聊天對沖應 佔另外四分之一。
因此,他的樣子,尼爾,我有這樣的 代碼在這裡,但它沒有反應。
它需要這樣的表現。
所以,我向你挑戰 給出這個代碼這裡 -
如果您刷新 CodePens,你會看到這一點。
或者,如果你只是粘貼代碼 在挑戰-2,你會看到這一點。
>> 下面是這個例子的代碼。
你會看到一些XXXS。
我要你改變XXXS,使得 時間軸和好友列表
遵循這些規範在這裡。
不要擔心什麼 裡面的時間表了。
我們會得到,在未來的一步。
但現在,讓我們看看如果我們得到 這些東西將其分割這樣。
這是否有意義嗎?
所以,如果你在家裡, 暫停視頻,並嘗試
使你的網頁 看起來反應是這樣的。
如果你在這裡,以 像兩,三分鐘。
隨意聊天,鄰居, 和嘗試,並解決先生扎克伯格
響應式設計的問題。
如果你有任何問題, 隨時讓我知道。
感覺不錯?
做了什麼?
美觀大方。
>> 聽眾:[聽不清]。
NEEL MEHTA:什麼?
>> 聽眾:我很好。
>> NEEL MEHTA:哦,好。
美觀大方。
聽眾:關於事情 12,難道是引導
對待一個給定的屏幕空間12 跨單位,然後把那個了?
究竟怎樣的 配料這項工作?
>> NEEL MEHTA:是的。
所以現在的問題是,如何 不配比
為引導工作,對不對?
>> 聽眾:是的。
NEEL MEHTA:所以每當 你有一個div類=“行”,
無論多麼大的屏幕, 引導會給你12個單位
相同大小的 佔用那麼多的大小。
因此,在第1欄,它總是8.33% 屏幕的大小,
不管是廣本 或者這就是這個寬。
等,當然,在一個較小的 屏幕上,每列是較小的。
你還有12列 寬,這是一個更小的。
因此,它是由你來確保 事情佔用多個列,
比例,以補償 對於空間不足。
那有意義嗎?
>> 聽眾:是的。
謝謝。
NEEL MEHTA:這個問題問得好。
聽眾:在一個大 屏幕上,你可以有
時間軸佔據四分之三?
>> NEEL MEHTA:是的。
NEEL MEHTA:如何傢伙感覺?
好?
涼。
因此,讓我們回來。
而且,我們試圖解決這個問題的一部分 對扎克伯格的網站。
因此時間表是在這裡,在 頂部,好友列表
是在底部。
因此,我們只需要分配 列,與漿紗比例,
在每個這些。
所以這第一個***是時間表。
什麼樣的課程,我們在這裡放?
什麼你們擺在這裡?
所以請記住,在大屏幕上,它需要 佔用四分之三的寬度。
還等什麼風格會給你的?
在一個大的屏幕,三 四分之三的寬度。
我們用什麼類呢?
聽眾:所以我們只是要 編輯類的一個實例。
NEEL MEHTA:現在。
是。
>> 聽眾:我們不是每個編輯, 時間軸的個體特徵?
NEEL MEHTA:不是現在,至少。
所以,這整個事情是一個塊。
我們只是改變了 塊的設計。
所以在這裡我們也COL-LG-9,因為它是 九的12寬的大屏幕上。
然後一個中等屏幕上, 我應該有多少列得?
聽眾:它應該 是一半一半。
NEEL MEHTA:對。
那麼是多少呢?
>> 聽眾:所以六人。
NEEL MEHTA:六。
然後額外的小應,如果它be-- 佔用行的整個寬度,
多少應該是什麼?
聽眾:12。
NEEL MEHTA:12。
是。
現在我們已經有了 改變這種其他的,
所以它佔用的空間的其餘部分。
因此COL-lg--
聽眾:這將 佔據整個屏幕?
NEEL MEHTA:它佔用了四分之一 一個大的設備上的屏幕的,
因為我們發現在這裡。
>> 聽眾:三。
>> NEEL MEHTA:三。
然後COL-MD-6取 向上的空間的其餘部分。
COL-XS-12。
所以,現在我們有時間表 佔四分之三
在大屏幕上的頁面 然後四分之一就在身邊。
然後,如果尺寸屏幕朝下, 它應相應調整。
所以它現在堆放, 在一個非常小的屏幕。
如果我們它的大小了一點點, 他們應該正好各佔一半。
因此,我們已經做了這麼遠。
很酷。
因此,我們不會做 挑戰的另一部分。
你可以做你自己。
但基本上,你要 試圖讓這些反應
作為well--使時間表 項目本身,響應。
所以,現在我們通過已經走了 所有你需要知道的
有關引導的響應側。
關於響應任何問題 設計與引導
以及如何你可能會去這樣做?
是?
>> 聽眾:它是類似的,如果 我們有一個嵌入式視頻
我們想控制 刻度在其中視頻was--
視頻的大小 從筆記本電腦去的電話。
NEEL MEHTA:是的。
或多或少。
你得告訴視頻 佔據盡可能大的空間,因為它給了,
這就是有時有點討厭。
但其核心思想是一致的。
視頻,就像任何其他對象 頁面,就像一個按鈕或什麼的,
只要你使用 列和行,
你可以給它一個 一定量的空間。
所以得到它的榮譽是一個 不同的問題,因為像YouTube
嵌入有一定的,首選大小。
但理論上,在 至少,它會工作。
涼?
>> 聽眾:我想接著, 對於圖像,你居然
需要有不同的版本 在不同的尺寸相同的圖像
筆記本電腦與iPhone?
是啊,問題是,我們需要 有有響應以及圖像。
事實上,你可以做到這一點。
我認為這是在CSS。
但引導允許 你要做到這一點為好。
你可以響應的圖像。
您可以讓您將圖像調整 根據頁面的大小。
而且有一個非常新的東西 HTML5,HTML的最新版本,
和CSS3,最新 版本的CSS,它
可以讓你請求不同的圖像 根據屏幕大小你在。
通常情況下,這是不夠好,只是 有你的形象只是收縮或增長到
不過大它需要。
但是你可以,如果你想 到,有一個32×32
對於非常小屏幕,並且 64 64為一個大屏幕,
再服的選擇。
你能行的。
它是由一些人來完成。
這仍然是相當前沿。
但簡短的回答,響應images-- 引導可以節省一天都有。
涼?
>> 聽眾:謝謝。
>> NEEL MEHTA:讓我們 談論真正的快速如何
得到這個在自己的網頁。
比方說,你想使你的 自己的網站上使用引導。
因此,讓我們只是剛 通過它一起走。
比方說,你讓剛 一個普通的HTML頁面。
隨意在跟隨 無論你喜歡的編輯器。
所以,我們只是有一些HTML頁面。
我們可以做到!DOCTYPE HTML。
這也是HTML,我們的頁面。
沒什麼新鮮的。
我們已經這樣做過。
所以在這裡,我們有我們的HTML和 我們可以把裡面的東西在這裡。
我們可以在按鈕。
正如我前面所說的,這 不一定去上班。
為什麼會這樣不工作?
為什麼不會得到我們的 不錯,多彩按鈕?
>> 聽眾:因為我們沒有聯繫起來 以引導項目或文件?
NEEL MEHTA:是的。
正確。
因為Bootstrap--它 只是一個花哨的CSS文件。
這是一系列的風格, 連接到你的元素。
這裡我們告訴它我們 要使用這些樣式。
我將大小了一點點。
我們已經告訴它,我們想用 這些樣式,但我們從來沒有
告訴它是什麼風格。
這就是你的 從早期的問題了。
這是這個問題的答案。
我們需要找到一種方式來獲得的樣式 包括他們在我們的網頁不知何故。
所以引導意志 我們展示了如何做到這一點。
>> 因此,如果你去頂 在這裡,入門。
有不同的方式來下載。
這可能沒有意義的必然。
Bootstrap--這會讓 你抓的CSS文件本身。
而你在自己的網頁包含它。
源代碼,如果你想 自己砍就可以了。
你不需要這真的。
薩斯是一種語言 可以編譯成CSS。
把它看成是一個預處理器。
就像PHP是一個預處理器 HTML,薩斯是一個預處理對CSS。
所以,如果你想這樣做 這樣一來,你可以做到這一點。
>> 最簡單的方法是使用CDN, 或內容分發網絡。
這是一個網站,只是 提供了引導副本
以非常快的你 包括在自己的網頁。
因此,這裡有一個例子。
它會給你這個鏈接元素。
鏈接元素告訴你的瀏覽器, 採取任何文件都存儲在這裡
並將其包含在我們的網頁。
在這種情況下,它的 在引導CSS文件。
所以,我們就複製該網址,或 該文本,我們將內部把它
我們的頭。
>> 我不會啟動頁面此, 但可以相信,這個工程。
該鏈接會得到你的CSS。
在包括它的 頁面,那麼你會
能夠使用所有的引導的 你知道類和愛情。
如果你想保留在本地和 有它自己的文件系統上
而不必去 互聯網抓住它,
就像如果你想 使用本網站下線,
您可以使用下載選項。
但在大多數情況下,使用 CDN是相當快的,因為這樣一來,
它不斷更新的你。
你或者手動更新。
合理?
>> 所以很多的工具將有這樣的建 在默認情況下。在您的Pset7和Pset8,
我認為,引導是 自動包括在內。
而在CodePen,為 例如,它已經
包括在內,因為我 補充添加設置。
所以,如果你想玩弄 有了它,你可以去CodePen,
或者去你的ID,或什麼的。
你也許能 訪問引導那裡,
但它並不總是建 在默認情況下,到網上。
合理?
>> 是。
就像recap--我們 就像離開了五分鐘。
但是作為一個回顧,在新的網頁, 您可以包括引導這樣。
一旦你擁有了它包括, 你可以做所有有趣的東西在這裡。
你可以繼續,你可以仔細閱讀 在CSS,你可以添加一些很酷的風格,
你可以有分量 喜歡的按鈕,
和的表,該列表 我們提到的項目。
有一些很酷的JavaScript插件, 你可能想探索。
他們補充一些很酷 交互的網頁。
像這樣的人讓一個模式對話。
>> 因此,有一些有趣的東西 你可以引導做。
所以,我給你的建議是先走 並用它在自己的項目,
按照說明,我們 只是做,如何得到它,
而剛剛看了引導,因為 您將了解更多關於做什麼。
因此,我們已經走了 在今天,如何使用
文檔,建設什麼 塊,以及它是如何在概念上。
所以,現在我向你挑戰是 使用引導一個網站。
進入文檔。
而使用我們所的工具 據悉,到目前為止,試圖解析它們
並了解他們。
並使用這些風格和工具 你看到有在你的網站。
它只是一個大的, 實驗過程。
>> 嘗試了一定的風格。
它的工作原理?
確實是不?
嘗試把東西在一起。
看看會發生什麼。
這是一個很有自我 指導,發現過程。
但今天,我們已經學會了 什麼是自舉最基礎?
為什麼它的工作?
它是如何工作的?
我們如何開始使用 它擺在首位?
所以現在你 過了駝峰,
應該能夠做到這一點 很順利地通過自己。
>> 所以再次,所有的 我們所做的代碼是在這裡。
所以,如果你想 得到一個刷上,
喜歡,什麼是一個快速作弊 片所有的風格?
你可以進入這個樣品在這裡。
我們這裡有一些例子風格。
如果你想嘗試 再由自己的挑戰,
你可以嘗試一下這裡 檢查出的解決方案。
所以,這個環節將是 包括在幻燈片上,這
將被發送,當然了你。
但它也是在這裡。
你可以暫停視頻,如果你想。
所有你需要的信息 打算就在這裡,在這個網站。
因此,如果任何人有任何問題,我們可以 帶他們在接下來的幾分鐘。
否則,謝謝大家 非常適合觀看。