实训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）

导航

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

1. 向标签添加 class .navbar、.navbar-default。
2. 向上面的元素添加 role=“navigation”，有助于增加可访问性。
3. 向 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 元素。
4. 这会让文本看 起来更大一号。 为
5. 了向导航栏添加链接，只需要简单地添加带有 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>

数据库

笔者有后端开发经验，暑假期间也做过go语言的项目，所以对mysql相当的熟悉，这里也就没啥笔记要做。