从今天开始,正式地开始记录一些关于前端的笔记,前端还是能够很好很快地反映出自己学过的东西,立等可见的东西最容易有成就感。基本的html、css、js、jQuery的概念都有,所以就直接从bootstrap开始了,当然因为都是一带而过,所以基础并不牢靠,如果出现关于基础知识的疑惑,我会倒回去看,然后再记录过来,所有的知识都按部就班学实在太过费时费力。
BootStrap的排版
1. 标题(.page-header)
2. 段落(.lead)
3. mark标记
4. 删除线<del>
5. 无用文本删除线<s>
6. 插入文本下划线<ins>
7. 小号字体<small>
8. 斜体<em>
这里也可以放心使用html的<i>
标签
9. 文本对齐,例<p class="text-left"></p>
10. 大小写,例<p class="text-lowercase"></p>
11. 列表,和HTML基本一致。可以记一记无样式列表。
12. 描述,或者可以看做是自定义列表
13. 水平排列列表
BootStrap中的代码块
<pre>
<code>
标签,该标签中的内容将视作代码
<var>
该标签中的内容视作变量
<samp>
标记程序输出的内容
<kbd>
标记用户通过键盘输入的内容
BootStrap中的表格
表格:<table class="table">
条纹状表格:<table class="table table-striped">
表格的边框:<table class="table table-bordered">
表格中的鼠标悬浮:<table class="table table-hover">
紧缩表格:<table class="table table-condensed">
其效果是让内边距缩小一半
响应式表格:将表格用<div class="table-responsive"></div>
包含
表格行或者单元格的颜色:行<tr class="warning">...</tr>
,单元格<tr><td class="success"></td></tr>
,颜色选项一共有:”info”,”active”,”warning”,”danger”。
BootStrap中的按钮
可以作为按钮的标签或者元素
<a>
/<button>
/<input>
标签上添加按钮类之后,均可以实现bootstrap按钮。
以下面的为例
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
这里要注意:
1. 虽然说可以将按钮类运用到<a>
标签上,但是导航和导航条只支持<button>
标签。
2. 如果将<a>
作为按钮用于触发当前页面的某些效果,那么记得设置role=”button”。
按钮的样式
<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>
尺寸
<p>
<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>