创建文档基本结构, 包括导入CSS,JS

bootstrap初学者模板

添加元件

先添加一个导航栏, 直接粘贴即可使用

https://v4.bootcss.com/docs/4.0/components/navbar/

添加卡片元件  直接复制相应的代码

https://v4.bootcss.com/docs/4.0/components/card/

此时页面基本有了样子

但是此时卡片两边也没有空余, 上边也没有空余

找到下图中的内容, 进行布局

使用container类的盒子 把卡片内容包起来

此时卡片居中了

但是卡片上方还很紧凑没有距离

控制margin padding

https://v4.bootcss.com/docs/4.0/utilities/spacing/

设置margin-top为

此时 卡片上方空出来了距离

接下来试着加上一些图片

http://lorempixel.com/ 可以快速产生假图

如: <img src =“http://lorempixel.com/400/200”/>

效果

bootstrap入门案例的更多相关文章

  1. 8 个实用的 Bootstrap 3 案例教程

    Bootstrap 3发布各大设计论坛议论纷纷.这次Bootstrap 3最大的特点就是--扁平化.下面就是一些早期的Bootstrap 3例子,不过亲们注意咯,因为大部分最早期的测试案例,可能用到一 ...

  2. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  3. SpringMVC入门案例及请求流程图（关于处理器或视图解析器或处理器映射器等的初步配置）

    SpringMVC简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 Spring结构图 Spr ...

  4. SpringMvc核心流程以及入门案例的搭建

    1.什么是SpringMvc Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 M ...

  5. Struts2第一个入门案例

      一.如何获取Struts2,以及Struts2资源包的目录结构的了解    Struts的官方地址为http://struts.apache.org 在他的主页当中,我们可以通过左侧的Apache ...

  6. MyBatis入门案例、增删改查

    一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...

  7. Hibernate入门案例及增删改查

    一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...

  8. 01.Bootstrap入门

    Bootstrap介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  9. Quartz应用实践入门案例二(基于java工程)

    在web应用程序中添加定时任务,Quartz的简单介绍可以参看博文<Quartz应用实践入门案例一(基于Web应用)> .其实一旦学会了如何应用开源框架就应该很容易将这中框架应用与自己的任 ...

随机推荐

  1. ES field store yes no 区别——可以设置为false，如果_source有的话

    store By default, field values are indexed to make them searchable, but they are not stored. This me ...

  2. LSM Tree 学习笔记——本质是将随机的写放在内存里形成有序的小memtable，然后定期合并成大的table flush到磁盘

    The Sorted String Table (SSTable) is one of the most popular outputs for storing, processing, and ex ...

  3. Python-单元测试unittest

    Python中有一个自带的单元测试框架是unittest模块,用它来做单元测试,它里面封装好了一些校验返回的结果方法和一些用例执行前的初始化操作,概念见下: TestCase 也就是测试用例 Test ...

  4. spring MVC basic

    1.MVC&&Spring MVC .mvc的就核心思想是业务数据抽取同业务数据呈现相分离 .View,视图层,为用户提供UI,重点关注数据的呈现 .model,业务数据的信息表示,关 ...

  5. 【BZOJ 4709】柠檬 斜率优化dp+单调栈

    题意 给$n$个贝壳,可以将贝壳分成若干段,每段选取一个贝壳$s_i$,这一段$s_i$的数目为$num$,可以得到$num^2\times s_i$个柠檬,求最多能得到几个柠檬 可以发现只有在一段中 ...

  6. python map函数 reduce函数

    Python中map()函数浅析 函数式编程: 更好的描述问题 map函数 怎么理解当传入多个参数list时,map如何运作:    abc函数第一次传入的数据时 (11,44,77),然后(22,5 ...

  7. PS 滤镜——漩涡 vortex

    %%% Vortex %%% 漩涡效果 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS A ...

  8. POJ2891Strange Way to Express Integers (线性同余方程组)

    Elina is reading a book written by Rujia Liu, which introduces a strange way to express non-negative ...

  9. 【ML】关于神经网络优化问题的随笔记

    1. 为什么不去试着最大化正确分类的图像数量而使用二次代价函数? 在神经网络中,被正确分类的图像数量所关于权重和偏置的函数并不是一个平滑的函数.大多数情况下,对权重和偏执做出的微小变动完全不会影响被正 ...

  10. 【Lintcode】363.Trapping Rain Water

    题目: Given n non-negative integers representing an elevation map where the width of each bar is 1, co ...