实训day2
学习感受
今天学习的有点多，上午学习了前端的框架，下午开始尝试项目和学习了数据库。之前学习了vue框架，也接触过Bootstrap，很好奇为啥不用vue框架，简单上手，但是想了一下，vue好像没有css库，只有组件库。并且使用的php语言，不太需要操纵DOM。
关于Bootstrap的网格系统不太理解。
学习收获
Bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、 JAVASCRIPT 的。给我的感觉就是一个响应式布局的css库。
字体颜色
text-muted 减弱的
text-primary 首要的
text-success 成功
text-danger 危险
text-info 信息
text-warning 警告
对齐
text-center 水平居中
text-right 靠右
对表格中的文字进行居中时，如果是th标签，则不能直接在table上使用类属性来实现居中，必须直接在
th标签上，针对性进行调整，table上的类属性可针对td标签生效
垂直居中：
属性：vertical-align: middle
tr td{ #可以针对表格设置样式
vertical-align: middle!important;
}
容器
div标签 class:container
容器是Bootstrap的基本构建块，用于在给定的设备或窗口中包含、填充和对齐内容。容器是Bootstrap中最基本的布局元素，在使用默认网格系统时是必需的。容器用于容纳、填充和（有时）集中其中的内容。虽然容器可以嵌套，但大多数布局不需要嵌套的容器。
Bootstrap附带三种不同的容器：
-
.container, 在每个响应断点处设置最大宽度 -
.container-fluid, 所有断点处100% -
.container-{breakpoint}, 宽度：100%，直到指定的断点
网格系统（布局的重点）
将浏览器窗口分成了12等份，可通过类属性来调整当前块元素所占的宽度值
//根据浏览器宽度的变换，不同风格的屏幕宽度占比在不断切换
col-xs-* 超小的屏幕 手机 (<768px)
col-sm-* 小屏幕 平板 (>=768px)
col-md-* 中等屏幕 笔记本（>=992px）
col-lg-* 大屏幕 大桌面显示器 （>=1200px）
导航
创建一个默认的导航栏的步骤如下：
-
向标签添加 class .navbar、.navbar-default。
-
向上面的元素添加 role="navigation"，有助于增加可访问性。
-
向 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 元素。
-
这会让文本看 起来更大一号。 为
-
了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
自己写的导航
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 导航栏头部 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">网站名</a>
</div>
<!-- 导航栏内容 -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
</ul>
<!-- 右侧登录按钮 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</div>
</div>
</nav>
数据库
