bootstrap控件收集这篇文章主要是记录一些自己在开发过程中用到的bootstrap控件，随着用到的控件逐渐增多，文

这篇文章主要是记录一些自己在开发过程中用到的bootstrap控件，随着用到的控件逐渐增多，文章内容也会随时更新

分页

分页控件使用ul和li构建，有几个关键的class值需要记住，pagination、page-item、page-link,默认居左对齐，justify-content-center表示居中对齐，active表示定位到当前页。

<ul class="pagination justify-content-center mt-3">
    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>

图片.png

搜索框

bootstrap官方并没有提供搜索框实现，但是可以通过组合其他控件的方式实现，其实bs的稍微复杂点的控件大部分是通过组合的形式实现的。

<form class="search-form">
    <div class="input-group"><span class="input-group-text"><i class="fa fa-search"></i></span><input class="form-control" type="text" placeholder="搜索书摘.." /><button class="btn btn-light" type="button">查询 </button></div>
</form>

图片.png