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. 和为S的连续正整数序列（双指针法）

    题目描述 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他 ...

  2. （九）微信小程序---for指令

    对于数据是列表 wxml <view wx:for="{{dataList}}">{{index}}-{{item}}</view> 我们可以看到上面的代码 ...

  3. springcloud--ribbo（负载均衡）

    ribbo:是Netflix公司开源的一个负载均衡的项目,是一个客户端负载均衡器,运行在客户端上. 实际运用案例(基于springcloud入门案例): 一.新建Module:springcloud- ...

  4. Asp.net MVC中ReturnUrl的使用

    1.控制器(Controller)[HttpPost][ValidateInput(false)]public ActionResult Add(Article article,string retu ...

  5. MongoDB 删除，添加副本集，并修改副本集IP等信息

    MongoDB 删除,添加副本集,并修改副本集IP等信息 添加副本,在登录到主节点下输入 rs.add("ip:port"); 删除副本 rs.remove("ip:po ...

  6. Oracle 新建用户、赋予权限

    1.新建用户 新建用户: create User username Identified by password 修改用户密码: alter User username Identified by p ...

  7. 3-Java逻辑控制语句

    目录 Java选择结构 Java循环结构 return.break.continue Math.random()的使用和条件运算符 1.Java选择结构 1.1.if(布尔表达式)单选结构 - 当布尔 ...

  8. qt 中使用 c 语言文件

    qt 中直接使用 c 语言文件,c 文件可以直接包含,h 文件包含的时候,需要在 c++ 中添加额外信息,如下: #ifdef __cplusplus extern "C" { # ...

  9. ISO处理jq事件

    jq事件在IOS上,如果标签本身不具备某些功能,而我们通过document或者body绑定上去的话,有些事件是不起作用的,同时在IOS上jq事件也存在延迟. 事件不起作用 这里点击事件为例,在IOS中 ...

  10. Elasticsearch 删除文档

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...