HTML_09_bootstrap-浅入
来源:互联网 发布:并查集数据结构优化 编辑:程序博客网 时间:2024/05/29 12:11
<link rel ="stylesheet" href="boootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
注意:必须前三顺序不要替换
<div class ="container" style="background:#eee">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img src="images/xx.jpg" class="img-responsive">
</div>
</div> // X4
</div>
//输出结果分析 在pc端大屏幕显示4张图片 中等屏幕3张 平板两张 手机1张
用于手机的自适应
<meta name="viewport" content="width=device-width,inital-scale=,user-scalable=no">
偏移 offset
只能向右偏移
语法
col-xs/sm/lg-offset-num
col-xs/sm/lg-offset-3 偏移三个列向右
排序
语法:
col-xs/sm/md/lg-pull-num 向左
col-xs/sm/md/lg-pus右-num 向左
字体颜色
<pclass="text-muted">...</p><pclass="text-primary">...</p><pclass="text-success">...</p><pclass="text-info">...</p><pclass="text-warning">...</p><pclass="text-danger">...</p>
示例
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
背景颜色
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<pclass="bg-primary">...</p><pclass="bg-success">...</p>
<pclass="bg-info">...</p><pclass="bg-warning">...</p><pclass="bg-danger">...</p>
下拉三角
▼<spanclass="caret"></span>
快速浮动
<divclass="pull-left">...</div><divclass="pull-right">...</div>
可理解
.pull-left {float:left!important; }.pull-right {float:right!important; }.element {.pull-left(); }.another-element {.pull-right(); }
checkbox-inline disabled// 鼠标移动上去禁止
http://v3.bootcss.com/css/#forms 参考
按钮
<!-- Standard button --><buttontype="button"class="btn btn-default">Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><buttontype="button"class="btn btn-primary">Primary</button><!-- Indicates a successful or positive action --><buttontype="button"class="btn btn-success">Success</button><!-- Contextual button for informational alert messages --><buttontype="button"class="btn btn-info">Info</button><!-- Indicates caution should be taken with this action --><buttontype="button"class="btn btn-warning">Warning</button><!-- Indicates a dangerous or potentially negative action --><buttontype="button"class="btn btn-danger">Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><buttontype="button"class="btn btn-link">Link</button>
<p><buttontype="button"class="btn btn-primary btn-lg">Large button</button><buttontype="button"class="btn btn-default btn-lg">Large button</button></p><p><buttontype="button"class="btn btn-primary">Default button</button><buttontype="button"class="btn btn-default">Default button</button></p><p><buttontype="button"class="btn btn-primary btn-sm">Small button</button><buttontype="button"class="btn btn-default btn-sm">Small button</button></p><p><buttontype="button"class="btn btn-primary btn-xs">Extra small button</button><buttontype="button"class="btn btn-default btn-xs">Extra small button</button></p>
总结
首先那些标签可以加】
<input type="button" value="按钮">
<button>按钮</butto>
<a href="#">内容</a>
.btn 是按钮的基本类
按钮样式
.btn-primary
.btn-default
.btn-success
.btn-warning
.btn-danger
按钮大小
.btn-lg 最大的
.btn-sm 小的
.btn-xs 最小的
按钮组
给父元素加
.btn-group
thumbnail 圆角的板框
下拉菜单
.dropdown-menu 给下拉列表的内容给ul 加样式
.dropdown 包含触发的按钮和下拉列表加样式 父元素
.data-toggle 按钮的触发器
.dropdown-menu-left 下拉的列表的对齐
.dropdown-menu-right 下拉的列表的对齐
.divider 给li加 没内容
标签页
.nav 是标签页 一个基本类 给ulla加
.nav-tabs 普通
,nav-pills胶囊
nav-stacked 垂直加
.active 给li加
导航
<nav class="navbar navbar-inverse" role="navigation">
...
</nav>
<nav><ulclass="pagination"><li><ahref="#">«</a></li><li><ahref="#">1</a></li><li><ahref="#">2</a></li><li><ahref="#">3</a></li><li><ahref="#">4</a></li><li><ahref="#">5</a></li><li><ahref="#">»</a></li></ul></nav>
http://v3.bootcss.com/css/#forms 参考
0 0
- HTML_09_bootstrap-浅入
- startActivityForResult浅入理解
- CoreData Fetch 浅入
- 浅入bash script
- JVM浅入
- 02_PHP_浅入
- 浅入MakeFile
- 浅入Https
- 浅入分析discuz编辑器
- 浅入MFC之类框架
- 浅入ICE组件编程
- 初入AS浅记录
- 浅入ICE组件编程
- 浅入MD5算法基本原理
- Java 8 CompletableFuture 浅入
- 浅入rails。真的很浅
- MyBatis 入门(简明浅入易懂)
- 浅入javascript正则表达式的规则.
- 一个纠结的bug以及微信、微博、QQ分享
- Okhttp与Okhttputils的用法及区别
- Java RMI 框架(远程方法调用)
- jquery has_检查父类元素中是否有 has 中 包含的表达式
- 关闭win7休眠文件 腾空间给SSD
- HTML_09_bootstrap-浅入
- eclipse 无 servlet 依赖
- 回顾各种编码的创新和异同-MEPG2, MPEG4, H.264/AVC以及H.265/HEVC比较(转)
- USB一种主从结构
- Swift自定义UITabBar
- Tomcat的HTTP与AJP协议
- c#出现WebForms UnobtrusiveValidationMode 需要“jQuery”ScriptResourceMapping(已测试成功)
- jquery each
- float数据在内存中的存储方法