创建文档基本结构, 包括导入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. Spring Boot- 用idea新建spring boot web项目

    1.新建project 2.选择Spring Initializr,next 3.输入项目信息,next 4.选择web依赖以及Spring Boot的版本,next 5.Finish 6.Enabl ...

  2. Linux课程---5、常用文件命令和目录命令（创建文件命令）

    Linux课程---5.常用文件命令和目录命令(创建文件命令) 一.总结 一句话总结: touch file1 1.管道符|有什么用? 将前一个命令的结果作为后一个命令的输入:比如查看文件前3行:ca ...

  3. jmeter--轻量级接口自动化测试框架

    大致思路: jmeter完成接口脚本,Ant完成脚本执行并收集结果生成报告,最后利用jenkins完成脚本的自动集成运行. 环境安装: 1.jdk1.7 配置环境变量(参考前面的分页) 2.jmete ...

  4. codeforces 612D The Union of k-Segments (线段排序)

    D. The Union of k-Segments time limit per test 4 seconds memory limit per test 256 megabytes input s ...

  5. Convolutional Neural Networks for Visual Recognition 2

    Linear Classification 在上一讲里,我们介绍了图像分类问题以及一个简单的分类模型K-NN模型,我们已经知道K-NN的模型有几个严重的缺陷,第一就是要保存训练集里的所有样本,这个比较 ...

  6. BZOJ4974 大视野1708月赛 字符串大师

    传送门 题目大意 给定一个字符串的每一个前缀的最短循环节长度,求符合要求的字典序最小的字符串. 题解 给定循环节最短长度就是给定了这个字符串$kmp$的$next$数组,即$X_i=i-next_i$ ...

  7. 【C&C++】查看代码运行时间

    查看代码运行时间有助于更好地优化项目代码 1. Windows平台 windows平台下有两种方式,精度有所不同,都需要包含<windows.h>头文件 1) DWORD GetTickC ...

  8. 计算MySQL的内存峰值公式 (转)

    -- 计算MySQL的内存峰值公式,计算所有的连接满了的情况下: select (@@key_buffer_size + @@query_cache_size + @@tmp_table_size   ...

  9. C#如何对DataTable中的数据进行条件搜索

    经常遇到将数据库中的数据读取到DataTable中的时候再次对DataTable进行条件筛选,下面的筛选的一个例子: DataRow[] dr = dt.Select("token = '& ...

  10. 文件异步上传，多文件上传插件uploadify

    本文中使用java作为例子 uploadify下载 http://files.cnblogs.com/chyg/uploadify.zip jsp页面中需要引入: <script type=&q ...