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. 浅谈MSF渗透测试

    在渗透过程中,MSF漏洞利用神器是不可或缺的.更何况它是一个免费的.可下载的框架,通过它可以很容易地获取.开发并对计算机软件漏洞实施攻击.它本身附带数百个已知软件漏洞的专业级漏洞攻击工具.是信息收集. ...

  2. bzoj 4652: [Noi2016]循环之美

    额,,网上一堆题解,,随便一找就找到笨蒟蒻扒的了. 这个比较神奇的是纯循环小数就是[(y,k)=1],题解有证明这个的,貌似就是k进制下的类似循环节,不会不会.. 然后这道题就变成了求这个东西:∑(x ...

  3. java虚拟机05(Java虚拟机的参数)

    原文在此 (1)-Xms20M 表示设置堆容量的最小值为20M,必须以M为单位 (2)-Xmx20M 表示设置堆容量的最大值为20M,必须以M为单位.将-Xmx和-Xms设置为一样可以避免堆自动扩展. ...

  4. 013.Delphi插件之QPlugins，模块化代码示例

    这个DEMO的是一个定义了一个窗体插件接口,把其他窗口注册到这个窗体插件接口中.主程序运行起来,就遍历一下窗体插件接口,把每个窗体内嵌到对话框中 运行效果如下 主窗口代码如下 unit Frm_Mai ...

  5. Mysql数据库的简单介绍与入门

    Mysql数据库的简单介绍与入门 前言 一.下载与安装 1.下载 官网下载MYSQL5.7.21版本,链接地址https://www.mysql.com/downloads/.下载流程图如下: 找到M ...

  6. poj 2376 Cleaning Shifts 最小区间覆盖

    Cleaning Shifts Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 40751   Accepted: 9871 ...

  7. docker-compose(grafana influxdb) + telegraf 快速搭建简单监控

     灵活实现方案:   1:     telegraf 为go 语言写得占用内存小 收集主机各项监控数据 定时写入 时序DB   influxdb ------------------------&qu ...

  8. maven的本地仓库

    今天新建的一个maven项目的依赖出了问题,想删除本地仓库的相关依赖文件夹,再重新加载,结果半天没找到文件夹位置. 我因为是改了maven的setting文件的,所以是直接到设置的文件夹里面找,结果半 ...

  9. --转载 详细介绍java中的数据结构

    http://developer.51cto.com/art/201107/273003.htm 也许你已经熟练使用了java.util包里面的各种数据结构,但是我还是要说一说java版数据结构与算法 ...

  10. sqlserver插入图片数据

    -- 插入 insert into [CHOLPOR].[dbo].[t_image](id, name) select '1', BulkColumn from openrowset(bulk N' ...