[bootstrap]学习思路和布局

学了bootstrap,往深走一下,就是看一下对应的底层的css是怎么写的.


1.登录(认证)入口
2.菜单对业务分类,每个菜单链接对应一个api
3.每个表单的crud对应一个api,(drf通过http方法区分)

4.前端目标做成一坨js.
5.表单本身的html需要后端传过来, 要想少传几个html, 必须前端得叼.

三大块:
    布局
        12栏等分,container col row(多row)
        排序和偏移
        垂直居中
        水平居中
        
    组件
    表单(列表)

布局

12栏分割

- 5+5: 等宽布局
<div class="container">
    <div class="row">
        <div class="col">零下一度</div>
        <div class="col">零下一度</div>
    </div>
</div>

- 8+2+2
<div class="container">
    <div class="row">
        <div class="col-md-8">零下一度</div>
        <div class="col">零下一度</div>
        <div class="col">零下一度</div>
    </div>
</div>

- 超过12会掉下去分两栏显示
<div class="container">
    <div class="row">
        <div class="col-md-8">零下一度</div>
        <div class="col-md-5">零下一度</div>
    </div>
</div>

列的排序与偏移 一行中列的Reordering

- order实现列的排序
    <div class="col">
    <div class="col order-3">
    <div class="col order-2">

    <div class="col order-last">
    <div class="col order-first">


- offset实现列居中
    <div class="row">
        <div class="col-8 offset-2">
            <input type="text" class="form-control">
        </div>
    </div>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <h1 class="page-header">主体</h1>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, impedit nesciunt beatae est possimus
                quos repellat cum cumque voluptate earum expedita minus error qui totam nam officia rem aliquam
                delectus.</p>
        </div>
        <div class="col-md-4">
            <h1 class="page-header">边栏</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, molestias, ad id omnis ducimus asperiores
                ex delectus impedit sed magnam consequatur nam quia enim ea quos ut vero obcaecati ullam?</p>
        </div>
    </div>
</div>

导航栏

navbar-expand-md 中等尺寸导航横向显示
navbar-light     字体颜色变灰
bg-light         给导航栏添加浅灰色的背景


<div class="container">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="#">maotai.org</a>

        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">社区</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">博客</a>
            </li>
        </ul>
    </nav>
</div>

折叠效果

1.包裹ul
    <div class="collapse navbar-collapse" id="navbar-content"></div>
2,写个button,并且添加图标
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar-content">
3,需要引入2个js

<div class="container">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="#">maotai.org</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar-content">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-content">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">社区</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">博客</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

导航栏的位置

- 固定顶部显示
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

sticky-top(很多浏览器不支持,弃用): 遇到顶部时候不滚动了

<div class="container" style="height: 300vh;margin-top: 100px;">
    <nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">

• 居右菜单
  参考
  

- 主要是mr-auto在生效

<div id="app" class="container">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="#">maotai.org</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavDropdown">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarNavDropdown" class="navbar-collapse collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">博客</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">手册</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                       data-toggle="dropdown">
                        Dropdown
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="https://www.baidu.com/" target="_blank">baidu</a>
                        <a class="dropdown-item" href="#">Another action</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url(\'/login\') }}">Login</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url(\'/register\') }}">Register</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>