个人学习Flex项目2016 - 2017 Chris Ferguson (20.5)
学习引导创建Web页面
为什么引导呢?
引导是最受欢迎的HTML、CSS和javascript框架开发响应性,移动网络上第一个项目。
换句话说,引导允许用户创建一个web页面格式和看起来不错在每一个屏幕的大小,从大型监控,介质平板电脑和一个小手机屏幕。为了证明这一点,这个页面是做引导,我鼓励你把它从一个更大的电脑屏幕缩小窗口宽度的手机屏幕上。
宽屏幕上这三列显示水平,并且不需要滚动视图。屏幕上一个狭窄的细胞列垂直堆栈,需要滚动但引导自动显示他们的格式。
我所做的!
与学习新技术,我用谷歌搜索了“引导”
大屏幕上左边的链接或低于窄屏幕上(感谢引导)是我发现最有用的网站使用引导学习和练习。
引导是由马克·奥托在Twitter和雅各布•桑顿。这最有可能解释了为什么“手机第一”,确保引导网页和手机屏幕/浏览器一道很好地工作。
下面是关于我的经验的教程学习引导,沉重的例子我学到的特性。
引导链接
引导主页
引导程序下载页面
谷歌引导
W3Schools引导教程
这是我最喜欢的一个引导功能:导航栏崩溃。大屏幕上的导航栏横渡屏幕的横向延伸。窄屏幕上它“可能”垂直堆栈,但是需要一个手机屏幕的最重要/看看菜单。引导可以瓦解整个菜单到一个小菜单图标。离开屏幕的内容,和一个图标,用户可以按和/或隐藏导航栏。重要观点这个例子在全宽缩小浏览器宽度看到手机导航栏替换菜单图标:
WebSiteNameHome
页1页1 - 1
1 - 2页
1 - 3页
第二页
第3页
报名
登录
缩放图片
正确图像显示屏幕上任何大小是一件棘手的事情。大图像缩小太小看起来像mush和扩展太大看起来像一个小图像模糊。在下面的例子中第一次屏幕截图是在其自然的大小,二是引导扩展它的屏幕尺寸:
引导.img-responsive类使图像比例尺好到父元素(调整浏览器窗口看到效果):
缩放视频
创建一个视频和规模它很好地反应到父元素16:9的宽高比。这是我第一次学习的引导,我一遍又一遍试图找出适当的大小显示在我的web页面中嵌入youtube视频。每次我似乎我将从另一个设备,查看页面看起来糟透了。经过研究,我发现引导。开始在这个视频全屏,然后缩小窗口大小宽度的手机:
谁可以使用引导?
任何人想要创建移动web页面做好了准备。需要一个HTML的知识和强大的级联样式表(CSS)的知识。如果你不知道CSS,现在停下来,学习CSS。引导有先进的特性,使用Javascript和JQuery但那些不需要,除非你使用了高级功能。事实上,一个巨大的优势是CSS是所有你需要知道使用引导创建web页面之间,规模大的电脑显示器和一个小手机屏幕。
很多少的视觉引导,增强让网页看起来更好。我认为这是所有关于屏幕大小但真的很多与创建漂亮的菜单、按钮、下拉框和其他视觉元素出现在web页面。
自举例子(这个Web页面)
这是HTML / CSS /引导创建这个web页面的代码:
< !DOCTYPE html >
< html lang =“en”>
<头>
<标题> Chris Ferguson Flex 2016 - 2017 < /名称>
< meta charset = " utf - 8 " >
< meta name = " viewport " content = " width =设备宽度,初始= 1”>
< link rel = "样式表" href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " >
< link rel = "样式表" href = " bootstrap.min " >
< script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js " > < /脚本>
< script src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " > < /脚本>
<时尚>
人力资源{
显示:块;
margin-top: 0.5 em;
margin-bottom: 0.5 em;
margin-left:汽车;
margin-right:汽车;
边框样式:插图;
边框宽度:3 px;
}
> < /风格
< / >头
<身体>
< div >
<标题>自习Flex项目2016 - 2017 < / h1 >
<标题> Chris Ferguson (20.5) < / h1 >
< h3 >学习引导创建Web页面< / h3 >
< / div > < div >
< div >
< div >
< / h3 > < h3 >为什么引导呢?
< p >引导是最受欢迎的HTML, CSS和javascript框架开发响应性,移动网络上第一个项目。< / p >
< p >换句话说,引导允许用户创建一个web页面将在每一个屏幕的大小,格式和好看
从一个大显示器,介质平板电脑和一个小手机屏幕。为了证明这一点,这一页是完成了
引导我鼓励你把它从一个更大的电脑屏幕缩小窗口手机屏幕的宽度。< / p >
< p >宽屏幕上这三列显示水平,并且不需要滚动视图。
屏幕上一个狭窄的细胞列垂直堆栈,自动滚动是必要的,但引导
将它们显示在取悦格式。< / p >
< / div >
< div >
< h3 >我! < / h3 >
< p >与学习新技术,我用谷歌搜索了“引导”< / p >
< p >宽屏幕上左边的链接或低于窄屏幕上(感谢引导)
我发现最有用的网站学习和练习使用引导。< / p >
< p >引导是由马克·奥托在Twitter和雅各布•桑顿。这最有可能解释了为什么“手机第一”,
确保工作引导网页和手机屏幕/浏览器。< / p >
< p >下面是关于我的经验的教程学习引导,沉重的特性我已经学了的例子。< / p >
< / div >
< div >
< h3 >引导链接< / h3 > < p > < A HREF = " http://getbootstrap.com/ " >引导主页< / > < / p >
< p > < A HREF = ' http://getbootstrap.com/getting-started/下载>引导下载页面< / > < / p >
< p > < A HREF = ' https://www.google.com/ q =引导' >谷歌引导< / > < / p >
< p > < A HREF = " https://www.w3schools.com/bootstrap/ " > W3Schools引导教程< / > < / p >
< / div >
< / div >
< / div >
<人力资源>
< div >
< div >
< div >
< P >这是我最喜欢的一个引导功能:导航栏崩溃。在大屏幕上
导航栏横渡屏幕的横向延伸。在一个狭窄的垂直屏幕它可能的堆栈
但这需要一个手机屏幕的最重要/看看菜单。引导可以崩溃
整个菜单到一个小菜单图标。离开屏幕的内容,用户可以按一个图标
和/或隐藏导航栏。再次,重要观点这个例子在全宽缩小
手机浏览器宽度的导航栏替换菜单图标:
< / div >
< / div >
< / div >
<导航>
< div >
< div >
<按钮类型=“按钮”data-toggle =“崩溃”数据目标= " # myNavbar " >
< span > < / span >
< span > < / span >
< span > < / span > < /按钮>
< a href = " # " > WebSiteName < / >
< / div >
< div id = " myNavbar " >
< ul >
<李> < a href = " # " > < / > < /李>回家
<李>
< data-toggle = "拉" href = " # " >第1页< span > < / span > < / >
< ul >
<李> < a href = " # " > 1 - 1页< / > < /李>
<李> < a href = " # " > 1 - 2页< / > < /李>
<李> < a href = " # " > 1 - 3页< / > < /李>
< / ul >
李< / >
<李> < a href = " # " >第2页< / > < /李>
<李> < a href = " # " >第3页< / > < /李>
< / ul >
< ul >
<李> < a href = " # " > < span > < / span > < / > < /李>报名
<李> < a href = " # " > < span > < / span >登录< / > < /李>
< / ul >
< / div >
< / div >
< / nav >
<人力资源>
< h2 > < / h2 >缩放图像
< div >
< div >
< div >
< P >正确图像显示屏幕上任何大小是一件棘手的事情。大图像缩小太小了
看起来像mush和小图像扩展太大一个模糊的样子。在下面的例子中首当其冲
屏幕截图是在其自然的大小,二是引导扩展它的屏幕尺寸:
< / div >
< / div >
< / div >
< IMG宽度= = " 540 " src = " 1284 "高度“coc2.png”>
< div >
< div >
< div >
< p >引导.img-responsive类使图像比例尺好到父元素(调整浏览器窗口看到效果):< / p > < img src = " coc2。png峡谷" alt亚博是专业买球 = "学院"宽度= " 1284 "高度= " 540 " >
< / div >
< / div >
< / div >
<人力资源>
< div >
< h2 > < / h2 >扩展视频
< p >创建一个响应视频和规模它好到父元素16:9的宽高比。
这是我第一次学习的引导,我一遍又一遍试图找出适当的
大小显示在我的web页面中嵌入youtube视频。每次我似乎拥有了
查看页面从另一个装置,它看起来可怕。经过研究,我发现引导。
开始在这个视频全屏,然后缩小到一个窗口大小的宽度手机:< / p >
< div >
< iframe的src = " https://www.youtube.com/embed/qIULMnbH2-o " > < / iframe >
< / div >
< / div >
<人力资源> < div >
< div >
< div >
< h3 >谁能使用引导? < / h3 >
< p >任何人,想要创建移动web页面做好了准备。HTML的知识是必要的
和强大的级联样式表(CSS)的知识。如果你不知道CSS,停止
现在,学习CSS。引导有使用Javascript和JQuery的高级特性
但这些不需要,除非你使用了高级功能。事实上,一个巨大的优势
CSS是所有你需要知道使用引导创建web页面之间的这种规模的好吗
一个大型的电脑显示器和一个小手机屏幕。< / p >
< p >很多少的视觉引导,增强让网页看起来更好。我认为
全是屏幕大小但真的很多与创建漂亮的菜单、按钮、
下拉框和其他视觉元素在网页看到。< / P >
< / div >
< / div >
< / div >