创建文档基本结构, 包括导入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. Hadoop- HDFS的API操作

    1.引入依赖 <dependency> <groupId>org.apache.hadoop</groupId> <artifactId>hadoop- ...

  2. Python基础-os、sys模块

    一,os模块import os ,sysos.system('ipconfig')#执行操作系统命令,获取不到返回结果 os.popen()#也可以执行操作系统命令,可以返回命令执行结果,但需要rea ...

  3. Chrome_01_点击 Google搜索结果在新的页面打开

    方法一:Ctrl + 左键 Chrome浏览器中,通过 Ctrl + 左键 ,是在新标签中打开的,通过 Shift + 左键 ,是在新窗口中打开的. 方法二: 1.登录 Google 2.进入下面的设 ...

  4. json-lib简单处理json和对json的简单介绍

    JSON 1.json是什么? *它是js提供的一种数据交换格式 2.json的语法 *{}:是对象! >属性名必须使用双引号括起来!单引号不行!!! >属性值: *null *数值 *数 ...

  5. 在程序中对ArrayList进行排序，并剔除重复元素

    import java.util.*; class sortDemo { public static void main(String[] args) { ArrayList<Object> ...

  6. Poj 2247 Humble Numbers(求只能被2，3，5, 7 整除的数)

    一.题目大意 本题要求写出前5482个仅能被2,3,5, 7 整除的数. 二.题解 这道题从本质上和Poj 1338 Ugly Numbers(数学推导)是一样的原理,只需要在原来的基础上加上7的运算 ...

  7. Qt安装与配置

    安装Qt 安装Qt Creator,打开终端执行如下命令: sudo apt-get install qt5-default qtcreator -y 安装Qt示例和文档: sudo apt-get ...

  8. Python-RabbitMQ消息队列实现rpc

    客户端通过发送命令来调用服务端的某些服务,服务端把结果再返回给客户端 这样使得RabbitMQ的消息发送端和接收端都能发送消息 返回结果的时候需要指定另一个队列 服务器端 # -*- coding:u ...

  9. http请求中的get和post的区别

    1.标准答案 GET在浏览器回退时是无害的,而POST会再次提交请求. GET产生的URL地址可以被Bookmark,而POST不可以. GET请求会被浏览器主动cache,而POST不会,除非手动设 ...

  10. python 基础 列表 字符串转换

    1. 字符串转列表 str1 = "hi hello world" print(str1.split(" "))输出:['hi', 'hello', 'worl ...