Bootstrap常用的类名

Bootstrap是当下流行的前端框架(界面工具集),移动端优先的设计理念,特点就是灵活简洁,代码优雅,美观大方,其目的是为了让Web开发更敏捷,是Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的,并利用业余时间完成第一个版本的开发
Bootstrap让我们的 Web 开发更简单,更快捷


Bootstrap常用的类名

xs : 超小屏幕 手机 (<768px),sm : 小屏幕 平板 (≥768px),md : 中等屏幕 桌面显示器 (≥992px),lg : 大屏幕 大桌面显示器 (≥1200px)


1排版
text-left/right/center(设定文本对齐方式)
.list-inline(将所有的列表项放置同一行) 


2表格
.table-bordered 为所有表格的单元格添加边框
.table-hover在 <tbody> 内的任一行启用鼠标悬停状态
.table-striped 在 <tbody> 内添加斑马线形式的条纹
row 行,col列


3表单
<form> 元素添加 role="form"
form-inline 内联表单,向左对齐的,标签是并排的
form-horizontal 水平表单


4按钮
btn-defalult默认/标准按钮
btn-primary 原始按钮模式(未被操作,深蓝)
btn-success 表示成功的动作(绿色按钮)
btn-info 该样式可用于要弹出信息的按钮(浅蓝)
btn-warning 表示需要谨慎操作的按钮(橙黄色)
btn-danger 表示一个危险动作的按钮操作(红色)
btn-link     让按钮看起来像个链接 (仍然保留按钮行为)
btn-lg/sm/xs 大按钮,小按钮,超小按钮
active 按钮被点击,disabled 按钮禁用


5图片
img-rounded 添加 border-radius:6px 来获得图片圆角
img-circle:添加 border-radius:50% 来让整个图片变成圆形
img-thumbnail:添加一些内边距(padding)和一个灰色的边框


6辅助类
pull-left 左浮动,pull-right 右浮动,clearfix 清除浮动
center-block 设置元素为 display:block 并居中显示
show 显示,hidden隐藏
close 显示关闭按钮


7响应式实用工具
visible-xs/sm/md/lg,超小/小/中等/大屏幕可见
hidden-xs/sm/md/lg,超小/小/中等/大屏幕隐藏


8徽章
<span class="badge">50</span> 类似未读消息


9多媒体对象
media-left/right,左对齐和右对齐

猜你喜欢

转载自blog.csdn.net/m0_63349753/article/details/126512059
今日推荐