Bootstrap 4基础学习03

1. Bootstrap4 导航栏

用 .navbar 类来创建一个标准的导航栏

 .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

用 ul 元素并添加 class="navbar-nav" 类。 然后在 li 元素上添加 .nav-item 类， a 元素上使用 .nav-link 类:

删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏

bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

激活和禁用状态: 可以在 a元素上添加 .active 类激活。 .disabled 类禁用的。

设置在nav中ul前面设置a元素.navbar-brand 类用于高亮显示品牌/Logo

li上设置dropdown，li中的a上设置dropdown-toggle，data-toggle="dropdown"，li中创建下拉菜单

导航栏的表单form 元素使用 class="form-inline" 类来排版输入框与按钮

navbar-text:非连接文本,保证水平对齐

使用 .fixed-top 类来实现导航栏的固定 .fixed-bottom 类用于设置导航栏固定在底部

1.2

<nav class="navbar navbar-expand-lg bg-success">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#">首页1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页4</a></li>
            </ul>
        </nav>

显示如下：

1.

  1.2 垂直导航栏，删除 navbar-expand-lg

 <nav class="navbar  bg-info">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#">首页1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页4</a></li>
            </ul>
        </nav>

显示如下：

1.3 高亮显示品牌/Logo  

 <nav class="navbar navbar-expand-lg bg-success">
            <a class="navbar-brand" href="#">
                <img src="imgs/avatar2.png" width="50px" height="50px">
            </a>
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link " href="#">首页1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页4</a></li>
            </ul>
        </nav>

显示如下：

  1.4 下拉菜单与排版输入框与按钮

 <nav class="navbar navbar-expand-lg bg-success fixed-top">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link active" href="#">首页1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页2</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">首页3</a>
                </li>
                <div class="dropdown-menu">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
                <li class="nav-item"><a class="nav-link disabled" href="#">首页4</a></li>
            </ul>

            <form class="form-inline">
                <input class="form-control" type="text" placeholder="Search">
                <button class="btn btn-info" type="button">Search</button>
            </form>
            <!-- 非连接文本 -->
            <span class="navbar-text">navbar-text:非连接文本</span>
        </nav>

显示如下：

 2. Bootstrap4 面包屑导航（Breadcrumb）

ul设置breadcrumb表示一个面包屑

breadcrumb-item面包屑中的每一项

<ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">顶级分类列表</a></li>
            <li class="breadcrumb-item"><a href="#">IT计算机</a></li>
            <li class="breadcrumb-item"><a href="#">java</a></li>
        </ul>

显示如下：

 3.Bootstrap4 表单

3.1堆叠表单

堆叠表单--垂直方向排列，全屏宽度

<!-- form-control 全屏宽度 -->
        <form>
            用户名： <input type="text" class="form-control" id="myname" placeholder="用户名">
        </form>

显示如下：

 3.2内联表单

内联表单--所有内联表单中的元素都是左对齐的 form元素设置form-inline

<form class="form-inline">
            用户名： <input type="text" class="form-control" id="myname" placeholder="用户名">
        </form>

显示如下：

 3.3 复选

复选：使用 .form-check-inline 类可以让选项显示在同一行上

            <input type="checkbox" class="form-check-inline" value="1">option1
            <input type="checkbox" class="form-check-inline" value="2">option2
            <input type="checkbox" class="form-check-inline" value="3">option3
            <input type="checkbox" class="form-check-inline" value="4">option4

显示如下：

3.4 单选

单选：使用 .radio-inline 类可以让选项显示在同一行上

            <input type="radio" class="radio-inline" name="1">Option1
            <input type="radio" class="radio-inline" name="1">Option2
            <input type="radio" class="radio-inline" name="1">Option3
            <input type="radio" class="radio-inline" name="1">Option4

显示如下：

 3.5 下拉列表

多选：multiple多选下拉菜单

<select multiple class="form-control">
                <option>Option1</option>
                <option>Option2</option>
                <option>Option3</option>
                <option>Option4</option>
            </select>

 显示如下：

 4. Bootstrap4 输入框组

.input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮

使用 .input-group-prepend 类可以在输入框的的前面添加文本信息

.input-group-append 类添加在输入框的后面。

.input-group-text 类来向表单输入框中添加文本。

使用 .input-group-input-group-textsm 类来设置小的输入框，

 .input-group-lg 类设置大的输入框

4.1大中小框：

<div class="input-group input-group-lg">
            <input type="text" class="form-control" placeholder="Username" id="usr" name="username">
            <div class="input-group-append">
                <span class="input-group-text">用户名</span>
            </div>
        </div>

        <div class="input-group ">
            <input type="text" class="form-control" placeholder="Username" id="usr" name="username">
            <div class="input-group-append">
                <span class="input-group-text">用户名</span>
            </div>
        </div>

        <div class="input-group input-group-sm">
            <input type="text" class="form-control" placeholder="Username" id="usr" name="username">
            <div class="input-group-append">
                <span class="input-group-text">用户名</span>
            </div>
        </div>

显示如下：

 4.2 一个前缀，对个输入框

<div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Person</span>
            </div>
            <input type="text" class="form-control" placeholder="First Name">
            <input type="text" class="form-control" placeholder="Last Name">
        </div>

显示如下：

 4.3 多个前缀，一个输入框

 <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Person1</span>
                <span class="input-group-text">Person2</span>
                <span class="input-group-text">Person3</span>
            </div>
            <input type="text" class="form-control" placeholder="First Name">
        </div>

显示如下：

4.4 输入框添加按钮组

<div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-append ">
                <span class="input-group-text">☎</span>
                <button class="btn btn-primary">百度一下</button>
            </div>
        </div>

显示如下：

 5.Bootstrap4 轮播

 <style>
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }

        #demo {
            width: 50%;
            height: 50%;
        }
    </style>

<body>
    <div class="container">
        <div id="demo" class="carousel slide" data-ride="carousel">
            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
                <li data-target="#demo" data-slide-to="3"></li>
            </ul>
            <!-- 轮播图片 -->
            <!-- carousel-inner 添加要切换的图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="imgs/2048376.jpg">
                </div>
                <div class="carousel-item">
                    <img src="imgs/2048378.jpg">
                </div>
                <div class="carousel-item">
                    <img src="imgs/2048387.jpg">
                </div>
                <div class="carousel-item">
                    <img src="imgs/2048475.jpg">
                </div>
                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>

        </div>
</body>

显示如下：

 6. Bootstrap4 模态框

.modal表示一个覆盖在父窗体上的子窗体

.modal-dialog对话框形式的子窗体

.modal-content具体内容设置

.modal-header具体内容的头

.modal-body具体内容身体

.modal-footer具体内容底部

 <button class="btn btn-info" data-toggle="modal" data-target="#mymodal">测试模态框</button>
        <div class="modal" id="mymodal">
            <div class="modal-dialog">

                <div class="modal-content">
                    <div class="modal-header">
                        <h3>编辑员工信息</h3>
                    </div>

                    <div class="modal-body">
                        <form>
                            <table>
                                <tr>
                                    <td>
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Username" id="usr"
                                                name="username">
                                            <div class="input-group-append">
                                                <span class="input-group-text">用户名</span>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="input-group">
                                            <input type="password" class="form-control" placeholder="Username" id="usr"
                                                name="username">
                                            <div class="input-group-append">
                                                <span class="input-group-text">用户名</span>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-info">保存</button>
                        <button class="btn btn-info" data-toggle="modal" data-target="#mymodal">关闭</button>
                    </div>

                </div>
            </div>
        </div>

显示如下：

 7. Bootstrap4 提示框/弹出框

7.1提示框

通过向元素添加 data-toggle="tooltip" 来创建提示框。

data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right

<a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">
            <img src="imgs/test2.JPG">
        </a>
        <script>
            $(document).ready(function () {
                $('[data-toggle="tooltip"]').tooltip();
            });
        </script>

显示如下：

 7.2 弹出框

通过向元素添加 data-toggle="popover" 来创建弹出框。

使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:

<a href="#" data-toggle="popover" data-placement="left" data-content="弹出框内容">多次点我</a>
        <script>
            $(document).ready(function () {
                $('[data-toggle="popover"]').popover();
            });
        </script>

显示如下：

8. 滚动监听(Scrollspy)

自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动

data-spy="scroll"设置滚动监听【通常是 body】

data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。

可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。

<body data-spy="scroll" data-target=".navbar" data-offset="70">
    自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动
    <p>data-spy="scroll"设置滚动监听【通常是 body】</p>
    <p>data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。</p>
    <p>可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。</p>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#section1">第1章</a></li>
            <li class="nav-item"><a class="nav-link" href="#section2">第2章</a></li>
            <li class="nav-item"><a class="nav-link" href="#section3">第3章</a></li>
            <li class="nav-item"><a class="nav-link" href="#section4">第4章</a></li>
        </ul>
    </nav>

    <div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
            look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
            look at the navigation bar while scrolling!</p>
    </div>
    <div id="section2" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
            look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
            look at the navigation bar while scrolling!</p>
    </div>
    <div id="section3" class="container-fluid bg-primary" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
            look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
            look at the navigation bar while scrolling!</p>
    </div>
    <div id="section4" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 4</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
            look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
            look at the navigation bar while scrolling!</p>
    </div>
</body>

9. 边框/浮动

9.1 设置边框

border 类添加或移除边框
border-primary.... 类添加或移除边框颜色
rounded 类可以添加圆角边框

<span class="border">border 类添加或移除边框</span><br>
        <span class=" border border-primary">border-primary.... 类添加或移除边框颜色</span><br>
        <span class="border border-info rounded">rounded 类可以添加圆角边框</span>

9.2 浮动

<div class="clearfix">
            <span class="float-left">左浮动</span>
            <span class="float-right">右浮动</span>
            <span>clearfix 清除浮动</span>
        </div>
        <h4>居中对齐</h4>
        <div class="mx-auto bg-warning" style="width:150px">
            <a href="#">超链接居中对齐</a>
        </div>

10. 盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

flex-direction 指定了弹性容器中子元素的排列方式

justify-content 属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

 <style>
        .flex-container {
            display: flex;
            width: 800px;
            height: 450px;
            background-color: lightgrey;
            flex-direction: row;
            justify-content: flex-end;

        }

        .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>

 <div class="flex-container">
            <div class="flex-item"> flex item 1</div>
            <div class="flex-item"> flex item 2</div>
            <div class="flex-item"> flex item 3</div>
        </div>