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. 2. react 简书 头部(header) 图标添加

    1. 访问 iconfont 并注册 登陆 2. 进入 iconfont 头部 图标管理->我的项目 3. 点击右边的文件夹 + 号 图标 创建我的项目 输入项目名称即可 4.在 搜索框 搜索 ...

  2. VTK基于MFC单文档的开发

    目录 项目的搭建 相关头文件的引用 添加成员变量vtkRenderer, vtkMFCWindow CXxxView()中实例化变量vtkRenderer CXxxView::OnInitialUpd ...

  3. Java集合基于JDK1.8的ArrayList源码分析

    本篇分析ArrayList的源码,在分析之前先跟大家谈一谈数组.数组可能是我们最早接触到的数据结构之一,它是在内存中划分出一块连续的地址空间用来进行元素的存储,由于它直接操作内存,所以数组的性能要比集 ...

  4. Redis详解（七）——集群

    Redis详解(七)--集群 ​Redis3.0版本之前,可以通过Redis Sentinel(哨兵)来实现高可用 ( HA ),从3.0版本之后,官方推出了Redis Cluster,它的主要用途是 ...

  5. 046、Java中使用if…else判断

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  6. Maven的原理和使用

    一.Maven能做什么 1.假设我们有10个项目,都需要引入spring core模块,那么需要十份重复的Spring Core.jar和commons-logging.jar 使用Maven:mav ...

  7. 洛谷 三月月赛 C

    呵呵呵呵,这个sb题做了好久,然并卵,还是不对. 挖坑++ 然而我感觉我做的对了,偷瞄了一下题解应该没什么问题. 这个题有n个点,n条边,所以是个基环树(我也不知道是不是这个名) 要每个点有联通,就是 ...

  8. python 输出六行星号✳

    for i in range(1,6): for j in range(5-i): print(" ",end=" ") for j in range(1,2* ...

  9. jQuery原理系列-工具函数

    jquery源码中有很多精妙的实现,对于我们每天都在使用的东西,一定要知其原理,如果遇到不能使用jquery环境,也能自己封装原生的代码实现. 1.检测类型 众所周知typeof 不能用来检测数据,会 ...

  10. UVA 10564 计数DP

    也是经典的计数DP题,想练练手,故意不写记忆化搜索,改成递推,还是成功了嘞...不过很遗憾一开始WA了,原来是因为判断结束条件写个 n或s为0,应该要一起为0的,搞的我以为自己递推写挫了,又改了一下, ...