栅格系统


title:css栅格系统中想填什么填什么
date: 2018-07-03 11:46:10

tags:

记录初次用Markdown写博客

表单

1
2
3
4
5
6
7
<div class="form-group">
<lable for=""> 村名 </lable>
<select class="form-control">
<option value="1">南塘镇</option>
<option value="1">碣石镇</option>
<option value="1">东海镇</option>
</select>

按钮

1
2
3
4
5
<button btn-default>
<button btn-danger>
<button btn-primary>
<button btn-warning>
<button btn-lg /sm/xs>

bootstrap响应式meta标签的作用

为了确保在所有设备上能够正确渲染并支持触控缩放,务必将设置 viewport 属性的 meta 标签添加到 中

1
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

aria-haspopup

aria-haspopup :true表示点击的时候会出现菜单或是浮动元素; false表示没有pop-up效果。
aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。

nav用于局部导航 nav-bar用于整站导航

1
2
3
4
5
6
<ul class="nav nav-tabs">  常规的 个人觉得不好看
<li class="active"><a href="#">登录</a></li>
</ul>
<ul class="nav nav-pills"> 药囊式导航栏 美观
<li class="active"><a href="#">登录</a></li>
</ul>

nav nav-stacked 让导航栏垂直落下 nav nav-justified 让导航栏分布均匀

#aa {
display: -webkit-box;
-webkit-box-orient: vertical; box-orient 属性规定框的子元素应该被水平或垂直排列。
-webkit-line-clamp:4;
overflow: hidden;
}
注释:IE 不支持 box-orient 属性。

panel 面板

panel panel-default
panle-heading
panle-title
panle-body
panle-footer

1
2
3
4
5
6
7
8
9
10
<div class="small text-muted">  字体变小 变得不明显

分页组件

<ul class="pagination">
<li><a href="#">上一页</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">下一页</a></li>
</ul>

css:
opacity属性是调整透明度