bootstrap入门案例

@H_502_3@@H_502_3@

 @H_502_3@

 @H_502_3@

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

 bootstrap初学者模板@H_502_3@

 @H_502_3@

 @H_502_3@

添加元件@H_502_3@

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

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

@H_502_3@@H_502_3@

 @H_502_3@

 @H_502_3@

 @H_502_3@

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

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

@H_502_3@@H_502_3@

 @H_502_3@

 @H_502_3@

 此时页面基本有了样子@H_502_3@

@H_502_3@@H_502_3@

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

 @H_502_3@

 @H_502_3@

 @H_502_3@

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

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

@H_502_3@@H_502_3@

@H_502_3@@H_502_3@

 @H_502_3@

此时卡片居中了@H_502_3@

@H_502_3@@H_502_3@

 @H_502_3@

 @H_502_3@

 @H_502_3@

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

 @H_502_3@

 @H_502_3@

控制margin padding @H_502_3@

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

@H_502_3@@H_502_3@

@H_502_3@@H_502_3@

设置margin-top为@H_502_3@

 @H_502_3@

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

@H_502_3@@H_502_3@

 @H_502_3@

 @H_502_3@

 接下来试着加上一些图片@H_502_3@

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

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

@H_502_3@@H_502_3@

 @H_502_3@

效果@H_502_3@

@H_502_3@@H_502_3@

 @H_502_3@

 @H_502_3@

 @H_502_3@

 @H_502_3@