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插件, 你可能想探索。
他们补充一些很酷 交互的网页。
像这样的人让一个模式对话。
>> 因此,有一些有趣的东西 你可以引导做。
所以,我给你的建议是先走 并用它在自己的项目,
按照说明,我们 只是做,如何得到它,
而刚刚看了引导,因为 您将了解更多关于做什么。
因此,我们已经走了 在今天,如何使用
文档,建设什么 块,以及它是如何在概念上。
所以,现在我向你挑战是 使用引导一个网站。
进入文档。
而使用我们所的工具 据悉,到目前为止,试图解析它们
并了解他们。
并使用这些风格和工具 你看到有在你的网站。
它只是一个大的, 实验过程。
>> 尝试了一定的风格。
它的工作原理?
确实是不?
尝试把东西在一起。
看看会发生什么。
这是一个很有自我 指导,发现过程。
但今天,我们已经学会了 什么是自举最基础?
为什么它的工作?
它是如何工作的?
我们如何开始使用 它摆在首位?
所以现在你 过了驼峰,
应该能够做到这一点 很顺利地通过自己。
>> 所以再次,所有的 我们所做的代码是在这里。
所以,如果你想 得到一个刷上,
喜欢,什么是一个快速作弊 片所有的风格?
你可以进入这个样品在这里。
我们这里有一些例子风格。
如果你想尝试 再由自己的挑战,
你可以尝试一下这里 检查出的解决方案。
所以,这个环节将是 包括在幻灯片上,这
将被发送,当然了你。
但它也是在这里。
你可以暂停视频,如果你想。
所有你需要的信息 打算就在这里,在这个网站。
因此,如果任何人有任何问题,我们可以 带他们在接下来的几分钟。
否则,谢谢大家 非常适合观看。