感悟:bootstrap就是一个预定义的模板,你用它的模板最主要的是要知道class是什么,class的作用域,作用范围是什么,各种bootstrap的实现是通过各种类名的添加来实现的,最重要的模块是栅格属性(当然,你可以动态改变栅格系统的列数)
如果要超小屏幕,小屏幕和中等屏幕同时拥有排列效果,那么需要把类前缀都加上(3个)
重要的类名
(相当于css.reset)
想知道元素为什么会设置为某个样式,比如为什么list-inline会让文本水平排列,可以打开浏览器审查元素,直接看css设置
表格标题和表格内容的写法
即便是不加table-responsive表格也是响应式的,加上更为保险一些
所有的包裹着form-group类的元素宽度都为100%
当你点击label的时候,input会自动获取焦点,所以label非常重要,注意图中id的对应一致性
每个input都加了一个类名class=“form-control”,这个类名加了之后,会让input样式发生一些改变
在bootstrap下创建按钮的三种方式(共同点是class=“btn
btn-default”,当然也可以通过其他的class来创建比如Success,Danger只是颜色不同而已)
响应式图片也非常简单加个class就可以了
在一些对界面要求不太严格的项目中,可以使用bootstrap
bootstrap组件路径导航
下拉列表的源码里面可以把所有以aria和role开头的删除掉 下面第4
<li role="separator" class="divider"></li>
行代表着下划线,添加可以使结构明晰 dropdown可以变为dropup
dropdown-menu可以变为dropdown-menu-right,下拉菜单元素就会右对齐 也可以添加一行li为下拉列表加个标题
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
按钮组 加个-vertical按钮就变成垂直排列 可以在按钮组里面加上下拉列表 按钮尺寸调整加上
btn-sm
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
输入框组不重要
导航
bootstrap导航都依赖于同一个nav类 如果你在使用导航组件实现导航条功能,务必在
- 的最外侧的逻辑父元素上添加
role=“navigation” 属性,或者用一个class="active"被选中状态
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
导航条
注意下拉列表的最外层一定是drapdown或者drapup
路径导航
一般在二级操作才会进行的
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
分页
一般用到默认样式 注意结合thinkphp和bootstrap来做后台分页样式 注意
active
的位置
pagination-lg可以改变分页位置的大小 也可以用label-success,danger等等改变颜色
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
徽章
> <span class="badge">4</span>这句话是主要的
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
列表组
每一个
li
默认宽度为100%,想要改变这种情况,首先要定义一个<div class="container"></div>
然后根据屏幕进行分列,一共有12列,很多时候不用所有的屏幕都考虑
通过设置class=list-group-item-success
可以改变列表组的颜色 当然也可以自己添加样式,改变表单的颜色方法如下图
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
列表组之徽章
面板组