如果你对Web开发感兴趣，学习使用Bootstrap是一个必要的基石。请阅读好的介绍。
本周，我们来看看Bootstrap。自举网站在2011年变得非常流行。为什么它变得如此受欢迎？两个主要原因:对开发者来说更容易–开发自定义CSS很无聊；它提供了一致的用户体验–由Twitter创建，人们知道如何与页面交互，因为他们已经使用Twitter来训练布局。
如今，自举是创建自定义网页时对设计的最低期望。这不仅仅是对设计决策的期望。我们会明白为什么。
请记得我们制作的可爱的网页吗？
是的，那一个。再次开启备份，因为我们会做一些简单的改动，把体验从单调变成制造。
一开始很简单。我们所要做的就是交换掉index.html文件中的样式表链接。我们没有指向我们创建的文件，而是指向CSS样式表的引导云托管。
删除标题中的样式表链接。将它粘贴到向导链接标签中。
& ltlink rel = " style sheet " href = " https://stack path . bootstrapcdn . com/bootstrap/4 . 1 . 0/CSS/bootstrap . min . CSS " integrity = " sha 384-9gvq 4 dyf***sjidznlewnxcjeswphjiwgpxr 1 jddihoegiu 1 fwo 5 qrgvfxodjz 4 " cross origin = " anonymous " >的链接。
保存您的更改。现在，在浏览器中打开您的index.html文件，看看这一变化如何影响您的应用程序。
我们的一些风格在Bootstrap风格中是不存在的，所以你可能会立刻注意到这些颜色的变化。你可能注意到的另一件事是字体不同。Bootstrap的默认字体不同于浏览器的字体。我们看到的最后一个关键区别是按钮。按钮形状比默认的更大更平。
让我们更新一些样式标签。
回到Bootstrap网站，你可以找到关于风格的文档。
如果我们浏览文档，我们可以找到更多关于样式图像的信息。看一看！转到文档，然后内容，然后图像。
我们可以让图像对屏幕大小和密度做出反应。设计网页时，你总是需要考虑桌面和移动浏览器的用例。很多观众会通过定位器浏览器进入，需要考虑用户在网络和移动设备上的体验。
如果您向下滚动图像页面，相应的图像、缩略图和图片将会成形。让我们试试我们图片的响应风格。
***建模代码片段的类部分。
class=\”img-fluid\”class = \ & # 8221img-流体\ ”
在文本编辑器中打开您的index.html文件。向现有图像标签添加类别属性。
<img id=\”myI***ge\” class=\”img-fluid\”>& ltimg id = \ & # 8221我的图像\ ”class = \ & # 8221img-流体\ ”& gt
保存更改并在浏览器中刷新index.html文件。单击“加载图片”按钮。当改变浏览器窗口大小时，请注意图像大小如何变化而不是被切断。
Bootstrap还有新的标签，比如样式标签，可以在Content >:Code下找到。让我们用电脑输出第二段。
使用<>替换标签
& ltsamp & gt然后我加了更多我想在新的一段。& lt/samp >
保存您的更改，并在浏览器中运行index.html文件。
但现在我们失去了一些造型！该链接不再位于新行上。当我向你展示如何分解东西时，我们用了
使用<>包装
在Bootstrap文档的Utilities部分，我们可以找到关于如何设置这些div框的更多信息。查看显示部分，我们可以找到如何显示文本的示例。我抓住了蓝色D块的例子。
class = \ & # 8221d-block p-2 BG-主文本-白色\ ”
现在我的div看起来像这样:
& ltdiv class = \ & # 8221d-block p-2 BG-主文本-白色\ ”& gt
& ltsamp & gt然后我加了更多我想在新的一段。& lt/samp >
& lt/div >
当我保存更改并在浏览器中刷新网页时，它看起来像这样:
继续研究Bootstrap文档，看看我们能用它做些什么。这使得建模更容易。准备下次做一些导航栏吧！
本文来自水洗晴空投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/591937.html
微信扫一扫 
