Bootstrap基础

Bootstrap 它是一个用于快速开发 Web 应用程序和网站的前端框架

一.它的大部分组件都会依赖javascript和jquery,因此它需要引入js文件和jquery文件

二.分开加载文件 务必按照顺序 首先是 jQuery然后是我们提供的 JavaScript 插件

三.Bootstrap 依赖一些重要的全局样式和设置，专门针对的是跨浏览器的样式 统一化

按钮

.container, 居中，适配不同的断的 max-width 尺寸

.container-fluid, 全屏，适配屏幕的 width: 100% 尺寸

   <!-- btn-lg表示按钮放大 -->

    <!-- btn-sm表示按钮缩小 -->

    <button type="button" class="btn btn-primary btn-lg">primary</button>

    <button type="button" class="btn btn-secondary">secondary</button>

    <button type="button" class="btn btn-success btn-sm">success</button>

    <button type="button" class="btn btn-danger">danger</button>

    <button type="button" class="btn btn-warning">warning</button>

    <button type="button" class="btn btn-info" disabled>info</button>

    <!-- disabled表示按钮禁用 -->

    <button type="button" class="btn btn-link">link</button>

    <button type="button" class="btn btn-light">light</button>

    <button type="button" class="btn btn-dark">dark</button>

    <div class="container">

        <input type="button" class="btn btn-dark btn-block" value="块级按钮">

    </div>

    <hr>

    <a href="" class="btn btn-primary btn-lg disabled" role="button" aria-atomic="true">primary</a>

 

   <nav aria-label="breadcrumb">

        <ol class="breadcrumb">

            <li class="breadcrumb-item active" aria-current="page">Home</li>

        </ol>

    </nav>

面包屑导航

    <nav aria-label="breadcrumb">

        <ol class="breadcrumb">

            <li class="breadcrumb-item"><a href="#">Home</a></li>

            <li class="breadcrumb-item active" aria-current="page">Library</li>

        </ol>

    </nav>

    <nav aria-label="breadcrumb">

        <ol class="breadcrumb">

            <li class="breadcrumb-item"><a href="#">Home</a></li>

            <li class="breadcrumb-item"><a href="#">Library</a></li>

            <li class="breadcrumb-item active" aria-current="page">Data</li>

        </ol>

    </nav>

表单

  <div class="container">

            <div class="row">

                <a href="" class="col-md-1">用户名</a>

                <div class="col-md-4"><input type="text" placeholder="请输入用户名"></div>

            </div>

            <div class="row">

                <div class="col-md-1">密码</div>

                <div class="col-md-4"><input type="text" placeholder="请输入密码"></div>

            </div>

            <div class="row">

                <button class="btn btn-success col-md-1">提交</button>

                <button class="btn btn-danger col-md-1 ">重置</button>

            </div>

    </div>