Bootstrap和Vue课程期末总结

《Web 框架应用与开发》期末复习大纲加粗样式

一、Bootstrap

• 熟练掌握 Bootstrap 布局
• 熟练掌握 Bootstrap 栅格系统
• 熟练掌握 Bootstrap 常用组件

识记要点:

1、什么是 Bootstrap 网格系统（Grid System）？

Bootstrap 包含了一个响应式的、 移动设备优先的、 不固定的网格系统， 可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类， 也包含了用于生成更多语义布局的功能强大的混合类。 响应式网格系统随着屏幕或视口（viewport） 尺寸的增加， 系统会自动分为最多 12 列。

2、Bootstrap 流式布局、页头、导航栏、缩略图

Bootstrap 流式布局：将Bootstrap的流式栅格放到class=“container-fluid” 的流式容器中，即可创建流式布局。流式布局将填满整个视口宽度。流布局是一种适应屏幕的做法。即不固定块的宽度，而是采用百分比作为单位来确定每一块的宽度。这种布局非常适合一次编写，然后自适应各种不同大小的屏幕（手机，PAD…）。
页头：页头组件能够为h1标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持h1标签内内嵌small元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

导航栏：
创建一个默认的导航栏的步骤如下：

• 向<nav>标签添加class .navbar、.navbar-default。
• 向上面的元素添加 role=“navigation”，有助于增加可访问性。
• 向<div>元素添加一个标题class.navbar-header，内部包含了带有 class navbar-brand的<a>元素。这会让文本看起来更大一号。
• 为了向导航栏添加链接，只需要简单地添加带有class.nav、.navbar-nav 的无序列表即可。
• 为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有class.collapse、.navbar-collapse 的<div>中。

缩略图：在图像周围添加带有 class .thumbnail 的<a>标签。

3、Bootstrap 表格边框和鼠标高亮的类

条纹表格： .table-striped class
边框表格： .table-bordered class
悬停表格： .table-hover class
精简表格：table-condensed class

<table class="table table-condensed"> </table>

4、Bootstrap 文本辅助类

5、BootStrap 中使用 tab 标签页插件，显示的内容的容器需要配置什么类

.nav-tabs 类依赖 .nav 基类。

6、BootStrap 中 tab 标签页插件的使用

7、Bootstrap 对齐样式中，表示超出屏幕部分不换行的样式是？

<p class="tex