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;就会有滚动条了

bootstrap快速上手的更多相关文章

  1. Bootstrap快速入门

    Bootstrap有两个重点,一个是概念的理解,理解bootstrap是如何通过div来代替过去的table布局的:一个是常用结构的熟悉,做到需要的组件马上就能找到,小修修改改可用就行.其最帅的一点就 ...

  2. 想要快速上手 Spring Boot？看这些教程就足够了！| 码云周刊第 81 期

    原文:https://blog.gitee.com/2018/08/19/weekly-81/ 想要快速上手 Spring Boot?看这些教程就足够了!| 码云周刊第 81 期 码云周刊 | 201 ...

  3. npm、webpack、vue-cli 快速上手

    npm+webpack+vue-cli快速上手   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...

  4. 快速上手最新的 Vue CLI 3

    翻译:疯狂的技术宅 原文:blog.logrocket.com/getting-sta- 概要:本文将指导你快速上手 Vue CLI 3,包括最新的用户图形界面和即时原型制作功能的使用步骤. 介绍 尤 ...

  5. springcloud - alibaba快速上手 - 更新完毕

    1.简单对比一下springcloud与springcloud-alibaba 2.准备知识 官网:https://nacos.io/zh-cn/ 查看cloud和springboot的对应关系 ht ...

  6. 【Python五篇慢慢弹】快速上手学python

    快速上手学python 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多 ...

  7. 快速上手Unity原生Json库

    现在新版的Unity(印象中是从5.3开始)已经提供了原生的Json库,以前一直使用LitJson,研究了一下Unity用的JsonUtility工具类的使用,发现使用还挺方便的,所以打算把项目中的J ...

  8. [译]：Xamarin.Android开发入门——Hello,Android Multiscreen快速上手

    原文链接:Hello, Android Multiscreen Quickstart. 译文链接:Hello,Android Multiscreen快速上手 本部分介绍利用Xamarin.Androi ...

  9. [译]：Xamarin.Android开发入门——Hello,Android快速上手

    返回索引目录 原文链接:Hello, Android_Quickstart. 译文链接:Xamarin.Android开发入门--Hello,Android快速上手 本部分介绍利用Xamarin开发A ...

随机推荐

  1. Java中null的判断

    Java中空指针的异常十分常见 if (name != null && !name.equals("")) { //do something } 或者 if (!& ...

  2. PG、GP与MySQL的特点和区别

    参考 PostgreSQL数据库 介绍:PostgreSQL是一种运行在Unix和Linux操作系统(在NT平台借助Cygnus也可以运行)平台上的免费的开放源码的关系数据库.最早是由美国加州大学伯克 ...

  3. WTL之VS2013环境搭建

    新版博客已经搭建好了,有问题请访问 htt://www.crazydebug.com 从国外回来,在老家入职了新公司,做c++开发,刚到新公司要熟悉公司的项目代码,目前公司在做一个主播聚合平台,界面采 ...

  4. 【LeetCode】反转每对括号间的子串

    [问题]给出一个字符串 s(仅含有小写英文字母和括号). 请你按照从括号内到外的顺序,逐层反转每对匹配括号中的字符串,并返回最终的结果. 注意,您的结果中 不应 包含任何括号. 示例 : 输入:s = ...

  5. Ubuntu跨版本安装软件

    更新到Ubuntu 19.10之后,源里的Goldendict就会不时的崩溃,让我十分心累.过了这么长时间也一直没有更新,估计在20.04之前是不会更新了.这段时间因为疫情不能出门,正好看看这个问题, ...

  6. SQL优化工具 - SQL Server Profiler与数据库引擎优化顾问

    最近项目做到几千个学生分别去人脸识别记录(目前约630000行)中查询最后一次记录,可想而知性能这块是个麻烦.于是乎,GET到了SQL Server Profiler和数据库引擎优化顾问这俩工SHEN ...

  7. MESI缓存一致性协议

    整理一下一些计算机的基础概念. 概念 MESI(Modified, Exclusive, Shared, Invalid) 也称 Illinois 协议, 由美帝UIUC(University of ...

  8. 吴裕雄--天生自然C++语言学习笔记：C++ 类 & 对象

    C++ 在 C 语言的基础上增加了面向对象编程,C++ 支持面向对象程序设计.类是 C++ 的核心特性,通常被称为用户定义的类型. 类用于指定对象的形式,它包含了数据表示法和用于处理数据的方法.类中的 ...

  9. Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) E. Arson In Berland Forest

    E. Arson In Berland Forest The Berland Forest can be represented as an infinite cell plane. Every ce ...

  10. IT日常技能：VMware网络配置

    1.0 基本概念 集线器:把一流量为M的端口分为N个端口,每个端口流量为M/N 交换机:把一流量为M的端口分为N个端口,每个端口流量仍为M 路由器:相当于两块网卡,一块连接外网并负责NAT, 另一块负 ...