bootstrap快速上手

bootstarp快速上手

首先英文不是非常好无法阅读英文文档的同学的可以翻阅其他团队翻译的官方：http://code.z01.com/
项目依赖 ,css文件在所有样式之前，js依赖，首先jq，再popper，最后bootstrap
注意: 1.h5的<!doctype html>标签是必须的， 2.<html lang="zh-cn"></html>也不要复制为lang=en(否则会样式失真) 3. 响应式meta标签，它首先为移动设备优化代码，然后用CSS媒体查询来扩展组件，所以这个也不能少:<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ,这些注意再官网的快速上手中都有

主要用于：

一站式展示性的门户网站，网页更多涉及展示，没有太多的业务，还有后台管理系统快速搭建

容器

container :流式布局，有挡位的
.container-fluid : 如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度
如何自己实现简单的呢？（使用媒体查询）

    <style>
        /* 小屏幕 */
        @media (max-width: 575px) {
            .self-container{
                background-color: red;
                width: 100%;
            }
        }
        /* 中等屏幕 */
        @media (min-width: 576px) and (max-width: 767px) {
            .self-container{
                background-color: green;
                width: 540px;
            }
        }
        /* 大屏幕 */
        @media (min-width: 1200px) {
            .self-container{
                background-color: gold;
                width: 1140px;
            }
        }
    </style>

栅格系统

bt包含了一个强大的移动优先的网格系统，它式基于一个12列的布局，有5种响应尺寸（对应不同的屏幕）

栅格系统提供了集中内容居中，水平填充网页内容的方法，使用.container作为父盒子

内部由行(.row)和列（.col）组成 

<div class="container">
    <div class="row">
        <div class="col">第一部分</div>
        <div class="col">第二部分</div>
        <div class="col">第三部分</div>
    </div>
</div>
//一个容器里，有一行，里面有三列，1.行会等分成12列 2.最小屏幕响应为col尺寸（如果不写尺寸，代表三个等分12列）  3.设置了最小尺寸响应，往上的尺寸默认会根据最小尺寸排版（除非自己修改了某个尺寸布局），如果没有设置小的屏幕，默认会使用父盒子100%宽度
//往上不设置从小，往下不设置默认100%


5个挡位 ：最小col  小col-sm  中等col-md (Moderate)  大col-lg (large) 最大col-xl (联想衣服的xl为特大尺寸)


对齐方式：行中的列元素在盒子中垂直居中：给row添加align-items-center (上，中，下)
        行中的列元素在盒子中水平居中：justify-content-center(中间，两端，左，右，间隔相等，等等)

清除间距:给父盒子添加.no-gutters

排序和偏移：order（顺序） order-1 （数值） 优先考录没有添加order的，数值越前（小），节点越靠前
          offset (偏移) offset-md-3 （相当于margin）

组件

组件的具体使用查看官方文档即可

首页demo总结

//使用bootstrap开发首页的常用组件自定制总结

//首页搭建项目结构，把每一个大的部分用标签和注释写好，在往里面塞内容

//css结构也根据html结构写好基础样式和注释，还有设置好通用样式

//1.顶部通栏：
1.需要用到栅格系统，都应该使用container标签包裹
2.row行，col为列（列进行栅格），中等屏幕以上都正常显示栅格格好的布局(col-md)  
3.通栏盒子需要在超小屏幕和小屏幕进行隐藏，中屏幕和大屏幕显示（d-none ，d-sm-none ，d-md-block 。。。）
4.Navbar组件最全的那个中就含有移动端汉堡导航

//2.轮播图定制：
//轮播图设计:一把有两张图，大图，且有两边留白（在较大的屏幕下，图片居中展示,使用显示居中的内容），小图，没有两边留白（在较小屏幕下，进行缩放显示）
1.使用jq获取窗口宽度，当较大屏幕时，使用大图，当较小屏幕时，使用小图
2.在html中我们就不能写img标签，而是应该给图片盒子（几个图片就有几个盒子）添加两个大小图片属性，在jq中获取所有图片盒子，遍历盒子，当屏幕为大屏幕的时候，获取大图属性，反之，获取小屏幕，获取到图片路径的时候，大屏幕的时候，给盒子添加背景图，小盒子就添加img标签

//卡片模块：
//一共6张卡片，再不同的屏幕下，一行展示3个，2个，1个，屏幕越大，每一行展示的越多
1.当大屏幕下，一行只要显示三个的时候，只要给图片设置col-lg-4 （每个图片都这样设置，当一行满了12之后，会再下一行显示，一次类推，小屏幕显示2个，只要设置col-sm-6）
2.卡片中的图文混排，再bootstrap中也有对应组件

//产品中心模块：
使用bt中的nav滑动门组件

//轮播图移动端手势滑动功能：
监听轮播图模块的滑动开始和滑动离开事件，对比两次位置横坐标的差值来判断是左滑还是右滑，判断完成后，可直接调用上一张/下一张按钮的点击事件即可

//bar当小屏幕的时候，显示滚动条
jq获取屏幕宽度，当屏幕宽度为小屏幕的时候，给ul添加宽度，再给整体的bar盒子添加overflow:auto;这样，小屏幕时，ul获取去一个大宽度，用于再一行装所有li，再设置overflow:auto;就会有滚动条了

bootstarp快速上手

主要用于：

容器

栅格系统

组件

首页demo总结

猜你喜欢