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. leetCode242 有效的字母异位词

    引言: 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词. 示例 1: 输入: s = "anagram", t = "nagaram&qu ...

  2. 通过流量管理器和 Azure Functions（作为代理）为全球用户提供最靠近的认知服务（或自定义API）

    本实战是一个中等复杂度的综合性实战,涉及到的内容有TrafficManager,AzureFunctions,域名/域名解析等几个内容. 本案例基础介绍: https://www.bilibili.c ...

  3. gem5-gpu 选项解释

    ‘--split’ ,该项用于模拟独立显卡,GPU与CPU不在同一芯片上,两者的内存物理上隔绝,使用PCI-Express连接. ‘--access-host-pagetable’,该项用于模拟集成显 ...

  4. 简述DDD，战略设计

    从What.How.Why三个层面进行了梳理. What:DDD是什么?DDD是用来解决软件复杂度的问题,是一种软件思想. Why:为什么DDD可以解决软件复杂度?对于规模造成的复杂度,可以借助限界上 ...

  5. 创建一个TCP代理

    代理技术 代理一般被我们用于"穿墙",具体来说可以看这里,或者查wiki.理解代理背后的原理之后,便很容易知道,代理的作用不仅仅只是"穿墙".例如我们可以把经过 ...

  6. 一文详解scala泛型及类型限定

    今天知识星球球友,微信问浪尖了一个spark源码阅读中的类型限定问题.这个在spark源码很多处出现,所以今天浪尖就整理一下scala类型限定的内容.希望对大家有帮助. scala类型参数要点 1. ...

  7. B. Sport Mafia 二分

    B. Sport Mafia time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  8. Window Server 2019 配置篇（1）- 创建域并把本机设置成域控制器

    由于这个学期的Window Server大作业是做一个服务器群,在域中创建包括DNS,DHCP,网关,更新服务器,hyper-v,自动部署等服务,所以我会把制作过程分步写在这个博客上 首先我们新建一个 ...

  9. OpenMandriva或将放弃32位的支持

    导读 除了Ubuntu计划在其19.10发行版中删除32位包之外,OpenMandriva开发团队也是另一个备受关注的Linux发行版起草计划,以取消对32位包的支持. OpenMandriva计划在 ...

  10. Docker常用命令，Docker安装Nginx、Redis、Jenkins、tomcat、MySQL

    常用命令 拉取镜像:docker pull xxx启动镜像:docker run --name xxx 8080:8080 -d xxx查看容器:docker ps xxx 停止容器:docker s ...