首页 > 代码库 > bootstrap系统学习
bootstrap系统学习
1.响应式中注意的内容:
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 } span.s1 { font: 9.0px "PingFang SC" }</style>一行(row)必须在.container中。
col-xs-
col-sm-
col-md-
col-lg-
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 } span.s1 { font: 9.0px "PingFang SC" }</style>列偏移 .col-md-offset-*
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 } span.s1 { font: 9.0px "PingFang SC" }</style>列排序 .col-md-push-* .col-md-pull-*
2.文本排版
h1-h6 类h1-h6
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px "PingFang SC Semibold"; color: #424242 } span.s1 { font: 10.0px "PingFang SC" }</style>强调文本 small strong em cite b和strong一样吧
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #424242 } span.s1 { font: 10.0px "PingFang SC" }</style>缩略语 abbr
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #424242 } span.s1 { font: 10.0px "PingFang SC" }</style>地址元素 address
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #424242 } span.s1 { font: 10.0px "PingFang SC" }</style>引用 blockquote
3.代码:
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px "PingFang SC Semibold"; color: #424242 } span.s1 { font: 9.0px Verdana } span.s2 { font: 9.0px "PingFang SC" }</style><code>显示单行内联代码
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px "PingFang SC Semibold"; color: #424242 } span.s1 { font: 9.0px Verdana } span.s2 { font: 9.0px "PingFang SC" }</style><kbd>显示用户输入代码
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 } span.s1 { font: 9.0px "PingFang SC" }</style><pre>多行代码块
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 } span.s1 { font: 9.0px "PingFang SC" }</style><var>变量
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 } span.s1 { font: 9.0px "PingFang SC" }</style><samp>程序结果
4.链表ul li
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 } span.s1 { font: 9.0px "PingFang SC" }</style>去点列表 .list-unstyled
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 } span.s1 { font: 9.0px "PingFang SC" }</style>内联列表.list_inline
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 } span.s1 { font: 9.0px "PingFang SC" }</style>水平列表dl.dl-horizontal
5.table
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #5d5d5d } span.s1 { font: 10.0px "PingFang SC" }</style>带背条纹表格.table-striped
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #5d5d5d } span.s1 { font: 10.0px "PingFang SC" }</style>带边框.table-border
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #5d5d5d } span.s1 { font: 10.0px "PingFang SC" }</style>紧凑.table-condensed
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #5d5d5d } span.s1 { font: 10.0px "PingFang SC" }</style>悬停.table-hover
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #5d5d5d } span.s1 { font: 10.0px "PingFang SC" }</style>行样式 .active .success .info
6. 表单
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }</style>.form-control
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }</style>.form-group
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 } span.s1 { font: 9.0px "PingFang SC" }</style>在form上应用.form-horizontal
control-label
<form class="form-horizontal" role="from"> <div class="form-group"> <label class=" col-sm-2 control-label">用户名:</label> <div class="col-sm-8"> <input type="text" class="form-control"/> </div> </div> </form>
单选和复选框
<div class="radio"> <label><input type="radio" name="sex" value=http://www.mamicode.com/"M" />男</label> </div> <div class="checkbox"> <label><input type="checkbox" />中国</label> </div>
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }</style> <style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }</style> <style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }</style> <style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }</style>
bootstrap系统学习
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。