首页 > 代码库 > Bootstrap学习杂记
Bootstrap学习杂记
1.排版样式
font-size:14px;
line-height:20px;
<p>段落元素被设置等于1/2行高即10px
颜色被设置为#333
h1到h6
36px 30px 24px 18px 14px 12px
Bootstrap分别对h1~h6进行了css样式重构并且支持普通内联元素
定义class=(.h1~h6)来实现相同功能
<h1>Bootstarp<small>框架</small></h1>
h1~h3下small占父元素的65%
h4~h6下small占父元素的75%
内联元素文本
<mark>元素或mark类,添加标记
//各种加线条文本
<del> //删除的文本
<s> //无用的文本 同del
<ins> //插入的文本
<u> //下划线的文本 同ins
//强调文本
<small> //85%
<strong> //加粗700
<em> //倾斜
//对齐
<p class="text-left">Bootstarp框架</p>
//缩略语
<h1><abbr class="initialism" title="">Bootstarp</abbr>框架</h1>
//大小写
<p class="text-lowercase">Bootstarp框架</p> //小写
<p class="text-uppercase">Bootstarp框架</p> //大写
<p class="text-capitalize">bootstarp框架</p> //首字母大写
//地址
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
//引用
<blockquote>引用文本</blockquote>
//列表排版
class="list-unstyled" //移除默认样式
class="list-inline" //设置成内联
//水平排列描述列表
<dl class="dl-horizontal">
<dt>Bootstarp框架</dt>
<dd>描述文本描</dd>
</dl>
//代码
<code><html></code>
<code><html></code>
press <kbd>Ctrl + ,</kbd>
<pre>please input ....</pre>
2.表格和按钮
//实现基本的表格样式
<table class="table">
//条纹状表格
<table class="table table-striped">
//边框
<table class="table table-bordered ">
//鼠标悬停实现效果
<table class="table table-hover">
//状态类 可以单独设置每一行的背景样式
<tr class="success">
五种样式 1.avtive 2.success 3.info 4.warning 5.danger
//隐藏某一行
<tr class="sr-only">
//响应式表格 表格父元素设置响应式,小于768px出现表框
<body class="table-responsive">
//按钮三种定义方法
input a button
<button class="btn btn-default">Button</button>
按钮的样式
btn-default //默认样式
btn-success //成功样式
btn-info //一般信息样式
btn-warning //警告样式
btn-danger //危险样式
btn-primary //首选项样式
btn-link //链接样式
按钮尺寸大小
btn-lg //大
btn //默认
btn-sm //小
btn-xs //很小
//块级按钮
btn-block
//激活状态
active
//禁用状态
disabled
Bootstrap学习杂记