作者：小茜的阳光2011_950 | 来源：互联网 | 2023-08-13 12:37
前置要求：熟悉并会使用HTML熟悉并会使用CSS熟悉并会使用Javascript熟悉一种会制作html的开发工具，新手推荐使用Editplus课程目标：开发环境有了，那么我们先尝试动手做点有用的，进一
前置要求：
- 熟悉并会使用HTML
- 熟悉并会使用CSS
- 熟悉并会使用Javascript
- 熟悉一种会制作html的开发工具，新手推荐使用Editplus
课程目标：开发环境有了，那么我们先尝试动手做点有用的，进一步的了解bootstrap
- 学习如何制作导航栏navbar，导航是最常用的结构，为了能够支持多终端，bootstrap又是如何实现这种特性的
- 学习如何使用Grid系统，bootstrap里是如何实现内容布局的
- 举一反三，知道bootstrap的架构理论之后，自我学习更多有关bootstrap的内容
一、如何下手Bootstrap 首先，一种技术如果是非常庞大的知识体系，那么我们学习它肯定不能没有条理的学，要不然，会迷惘的。当然，bootstrap没那么夸张，不过再小的知识内容也可以细分。好吧，那么bootstrap主要分几块来学呢？
- 基本结构部分，这部分主要演示bootstrap，它是如何实现和体现html的基本功能，譬如布局，格式书写，表单，表格等等。
- 组件部分，在这么长时间的web开发过程中，大家都意识到许多东西是比较固定，这些固定的部分，往往经常被重用，bootstrap把这些常用的模块结构加以收集和提炼，做成非常好用的组件。譬如，导航一般网站都会有，我们这里第一个开刀的就是它。
- js组件部分，同上，这部分也是组件，不过为了增强交互能力和交互效果，加入js的支持。譬如弹出菜单，滚动图片浏览器等等
- bootstrap兼容性问题以及多终端相关知识，这部分最好在你足够了解bootstrap之后再去思考和总结。
废话不多说，动手，先尝试，让自己有感觉。
二、网站能少导航么？ 首先，我们来学习如何制作最常用的bootstrap组件，navbar导航栏。我们的代码可以接着之前的代码继续。
我们采用循序渐进的方式来认识导航的html代码结构。
此代码，是让我们构建一个纵向导航菜单。类 active表示当前激活项，disabled可以屏蔽菜单项，自己尝试。如何让它变成横向导航菜单呢？只需要在nav后再追加一个类navbar-nav。虽然可以体现横向菜单效果，不过一般导航是放在导航菜单容器中的，所以代码如下。
此处navbar表示导航容器，导航容器中可以放许多东西，navbar-default表示导航的一种样式，bootstrap还可以一种反色样式navbar-inverse。自己尝试看效果。接下来，我们要来完成导航适应多种分辨率的自由变化，这里的变化指在浏览器宽度过窄的时候，菜单能自动隐藏。很简单，只需要在nav菜单外面套一个收缩容器。
此处类collapse其实规则是隐藏display:none，那为什么没有隐藏呢，是因为.navbar-collapse.collapse在宽度大于768px的时候是display:block。尝试拉伸浏览器的宽度来看效果。但是菜单隐藏了，怎么用呢？接下来，我们要让菜单可以通过按钮点击弹出。
此处类navbar-header是导航头容器，里面除了可以放切换按钮之外，还可以放导航logo，由navbar-brand来定义。data-toggle表示切换收缩状态，data-target里定义一个选择符，表示要切换哪个导航菜单，因为下面定义了这个类，当然你可以用id，组合选择符来定义。自己尝试效果，因为这里有js的支持，所以菜单会有动态的弹出效果。下面我们来看一个更加完整的版本。
完整版本中，美化了切换按钮。role这个 属性bootstrap是强调要有的，虽然不是必须的，这是为了增加代码结构的可读性和可访问性。类sr-only其实search only，意思为搜索引擎友好化，所以Toggle navigation这字是不显示的。icon-bar定义了标签一种横线图片背景，关于其他的图片，可以去参考文档。到此为止，我们这个简易的具备支持多终端的响应式导航就完成了。
三、页面内容如何组织？Bootstrap Grid系统
京公网安备 11010802041100号