启动你的网页 1 - 准备就绪

分享于 

16分钟阅读

Web开发

  繁體

序曲

,的文章中,我已经解释了响应性网页设计的概念和重要性,在今天的Web生态系统的多屏中,我解释了响应。 在这本书中,读者还可以通过一个简单的方法来开发一个响应性的网页。 整个过程类似于通过运用木工知识和技能,在各种家具部件上进行木工。切割。切割和雕刻,并根据设计的设计将它的组合起来。 不幸的是,这太耗时,并且容易出错,并且可以能不是茶杯所有人的杯子 !

或者,你可以选择准备好家具零件并把它们放在一起。 Likewise,你可以选择使用 many end web,faster,以帮助你更快,更轻松地构建响应式网页,更容易,更容易,更容易出错。

在本文中,我们将我们的视线设置为,目前最流行的前端网页开发框架是。 我们将深入研究 Bootstrap的各种特性和功能,因为我们使用它来创建响应性的网页。

关于 Bootstrap

在它的主页上,Bootstrap 被描述为:

引用:

"。"。最受欢迎的HTML,CSS和JS框架,用于在web上开发响应性的移动第一项项目。

最初被称为 Twitter 蓝图的Bootstrap 是由 标记 Twitter 和Jacob在mid-2010中的位置。 由于它在GitHub上作为开源项目发布,拥有二十多个版本,其中包括两个版本,分别用于版本 2和 3的两个主要。 迄今为止,Bootstrap 已经成为世界上最流行的前端网络开发框架和开源项目之一。

当前 Bootstrap 3 为你的网页提供易于和高效可以扩展的out-of-the-box移动第一响应,以适应手机的多个设备。 此外,Bootstrap 是免费的,具有丰富的功能:

  • 增强的版式,图像,表格,窗体,按钮和其他标准HTML元素的设计。
  • 视觉传达意义的语义样式。
  • 自定义用户界面组件,如导航栏,进度栏,分页,寻呼机等等。
  • 用于可折叠。工具提示。carousel 和更多的交互式JavaScript部件。

在不同的样式设置中,Bootstrap 提供了许多定制的CSS类,以便在上下文和responsively上进一步。 例如下面的内容 文本小写 Bootstrap 库的CSS中声明的规则用于将文本转换为 lowercase:

.text-lowercase{text-transform:lowercase}

将这里应用到HTML元素,例如 <> 指定选择器名称 文字小写 到打开中的类属性 <> 标记如下所示:

<pclass="text-lowercase">HTML ELEMENTS SHOULD BE WRITTEN IN LOWERCASE</p>

这将在浏览器中呈现 lowercase 中的整个段落。

如果你不熟悉网页样式,请阅读我关于样式的文章,以了解你的第一个网页。

不要仅仅是单词的读者,而是 doers。 通过探索使用 Bootstrap 创建响应性的网页,这样做是相信的。

准备引导程序

首先,使用文本编辑器打开文件,并将它的保存为网页,比如" bootstrap_starter_template.html"。

在这里 file: 中添加以下语句

  • 将你的网页设置为 HTML5,包括以下内容 DOCTYPE 在网页的第一行声明:
    <!DOCTYPEhtml>
  • 设置网页内容使用的默认语言 lang 属性 <html> 标记如下:
    <htmllang="en">
  • 设置适当的字符编码声明,方法是 字符集 元标记 inside <头> 部分如下:
    <metacharset="UTF-8">
  • 添加 viewport 元标记指示页面遵循显示设备的物理屏幕宽度,并将初始缩放级别设置为 1.
    <metaname="viewport"content="width=device-width, initial-scale=1.0">

看看你目前所完成的工作:

<!DOCTYPEhtml><htmllang="en"><head><title>Starter Template for Bootstrap</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"></head><body></body></html>

接下来,将 web page-库 CSS Bootstrap 库CSS库 CSS Bootstrap 库JavaScript库JavaScript和core核心jQuery库 include。 下一个问题是:在哪里获得?

你可以:

插件可以提供一些性能优势。 通过在遍布全球的服务器上托管文件,它们可以从最接近用户的服务器传递。 另一个好处是浏览器将缓存从roo下载的任何文件,以便不必从相同的osi下载。 这本书将使用CDN的所有示例。

这个页面也通过css给出了一个方格的background 背景图像 属性中 <正文> 标签。格格 background 中的每个框都测量 50px 到 50px,作为测量开发过程中屏幕大小的视觉帮助。 你当然会用你自己的设计在生产网页中替换这个 background。

你的网页现在应该是引导程序,如下所示:

<!DOCTYPEhtml><htmllang="en"><head><title>Starter Template for Bootstrap</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><bodystyle="background-image: url(http://www.peterleowblog.com/wp-content/uploads/2016/12/background-50px.png)"></body></html>

你可以在这里的浏览器上查看它。

作为网页的标题及它的文件名,将它的作为起始模板,用于生成使用 Bootstrap 框架的新网页。 你可以在这里下载代码

现在,你已经准备好进入 Bootstrap的世界 !

选择容器

<正文> 部分,Bootstrap 将网页 inside的内容放置在响应性容器中 <div> 其中的样式和行为是由两个CSS类之一定义的。 .container 或者 容器流体 -provided由你在网页中包含的Bootstrap CSS库。

有什么区别 .container容器流体 什么更好的方法来找到答案。

打开" bootstrap_starter_template.html",用新名称保存它,例如" bootstrap_container.html"。 在" bootstrap_container.html"网页中,添加两个 <div> that s 包含一些虚构段落。 第一个 <div> 被赋予 .container 通过类属性样式 class="容器" 而第二个则是 容器流体 通过类属性 class="容器流体" 这两个 <div> '1 are也通过 inline css呈现在不同的background 颜色中 页边距背景色 它们可以被轻易地识别出来。

" bootstrap_container.html"的完整代码显示为 below,并可以用于下载。

<!DOCTYPEhtml><htmllang="en"><head><title>Comparing Bootstrap Containers</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><bodystyle="background-image: url(http://www.peterleowblog.com/wp-content/uploads/2016/12/background-50px.png)"><divclass="container"style="background-color:#CFF;margin-top:1%"><p>This is inside the container class. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non. Sed pulvinar ultrices iaculis. Aenean ex odio, facilisis vel cursus id, vestibulum sit amet arcu. Morbi elementum lectus at tempus lobortis. Vivamus eget elit volutpat, vulputate arcu ac, fermentum risus. Praesent tempor urna eget orci bibendum, ac laoreet tellus commodo. In hac habitasse platea dictumst. Cras porttitor mi ac lectus imperdiet, et tincidunt enim aliquam.</p></div><divclass="container-fluid"style="background-color:#9FC;margin-top:1%"><p>This is inside the container-fluid class. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non. Sed pulvinar ultrices iaculis. Aenean ex odio, facilisis vel cursus id, vestibulum sit amet arcu. Morbi elementum lectus at tempus lobortis. Vivamus eget elit volutpat, vulputate arcu ac, fermentum risus. Praesent tempor urna eget orci bibendum, ac laoreet tellus commodo. In hac habitasse platea dictumst. Cras porttitor mi ac lectus imperdiet, et tincidunt enim aliquam.</p></div></body></html>

将它的放在浏览器上,或者在线演示,然后调整浏览器的大小,观察两个容器的行为,并将它的显示出来。 div ''s。

Figure 1 : Bootstrap's Containers图 1: Bootstrap的容器

你会注意到第二个容器 <div class="容器流体"> 跨越视口的完整宽度,并创建一个不断包装和重新包装它的内容的流体布局,第一个容器。 <div class="容器"> 在 Bootstrap 库的CSS中声明的CSS查询中,只有某些最小屏幕宽度的响应也称为 breakpoints breakpoints breakpoints dictated queries dictated

  • 创建一个固定宽度响应容器,它的宽度为 750px 宽,比如平板电脑的最小屏幕宽度。 768px
    @media (min-width:768px){
    . container{width:750px}
    }
  • 在桌面设备( 如桌面和 笔记本 ) 上创建一个固定宽度响应响应容器,该容器具有最小屏幕宽度,例如桌面。 992px
    @media (min-width:992px){
    . container{width:970px}
    }
  • 在大型设备( 例如大屏幕) 上创建一个固定宽度的响应响应容器,例如具有最小屏幕宽度的大桌面。 1200px
    @media (min-width:1200px){
    . container{width:1170px}
    }

那些非常小的设备会发生什么,比如手机屏幕宽度 LESS 比 768px 他们会采取的行为 容器流体 类。

你可以在每个断点中验证各自的屏幕宽度和容器宽度,使用方格 background 作为参考。

在离开本节之前要注意的最后一点是:

注:

不能将 Bootstrap inside 容器放置在另一个容器中。

现在你有了 Bootstrap的两个容器的更清晰的图片,那么你可以选择更适合你的网站。

下一个

选择了 Bootstrap的容器,现在可以注意设计适应于手机。平板电脑。笔记本 和桌面等不同类型的设备。 因此,你必须在 Bootstrap 系统的网格上有一个好的grip。 但是,这将只在下次装运时出现。 一直到那时候 !

在post网站上首次展示了post的文章 1-getting getting getting。


相关文章