首页 > 代码库 > 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系统学习