关于bootsrtap如何轻松布局

一，布局的麻烦

一般在我们在没有用插件写项目的时候，我们的布局一般就是采用html和css以及js进行布局，先不说js,平常我们写html加样式的时候，很容易搞一些重复的代码，很浪费时间，所有就出了很多插件，帮我们解决一些代码重复的问题，bootstrap就是一款非常不错的插件，为我们布局什么的轻松

二，关于bootstrap的一些写法

栅格系统就不讲了上篇博客讲了栅格系统
上篇博客
这次讲一些更实用的用法
1，关于颜色的改变
我们平常的布局，颜色就是非常重复的一项

<p class="text-info">蓝色</p>
<p class="text-danger">红色</p>
<p class="text-justify">黑色</p>

2，关于边框的改变
使用这个可以快速的给元素加上边框和边框半径

<span class="border border-info rounded-circle">圆形</span>
<span class="border border-danger rounded-pill">椭圆</span>
<span class="border border-justify rounded">切角</span>

3，关于对一些文本的处理
可以完全的去控制文本的对齐方式，组合的处理

<p class="text-justify">文本对齐</p>
<p class="text-left">左对齐</p>
<p class="text-right">右对齐</p>

<p class="font-weight-bold">变粗</p>
<p class="font-weight-light">变细</p>

4，关于阴影的处理
可以随意给元素添加和除去阴影

<div class="shadow p-3 mb-5 bg-white rounded">加阴影</div>
<div class="shadow-none p-3 mb-5 bg-light rounded">除去阴影</div>

最后bootstrap这个插件基本就是类名和用法和栅格系统核心，结合使用，可以让我们在布局上面少写很多代码