发表于: 2017-06-16 21:10:36
1 904
今天完成的事情:
复习Bootstrap基础,掌握基本概念。
找小课堂资料
明天计划的事情:
继续看Bootstrap资料,找小课堂资料
遇到的问题:
暂无
收获:
基础CSS
在框架的基础上,对HTML基础元素进行样式定义,并利用可扩展的class增强其展示效果,从而提供形式新颖,风格一致的外观和体验。
总共6个
排版 代码 表格 表单 按钮 图标
1.排版( 标题,段落,列表,以及其他行级元素,)
排版尺度
整个排版系统的单位尺度都取决于variables.less文件中的两个Less变量:@baseFontSize 和 @baseLineHeight。 前者决定全局的默认字体大小font-size,后者决定默认的行高line-height。
我们利用这些变量,配合一些数学运算,就可以得到定义样式时所需的margins, paddings, line-heights等等
h1-h6
强调,缩写,地址,
<strong> 加粗强调一组文字
<em> 倾斜强调一组文字
<abbr> 包装缩写词,当鼠标经过时显示缩写词完整含义。
可使用 title 属性存放完整字词信息
使用 .initialism 类可以将缩略词大写,为了美观点。
<address> 用于包装联系信息的最外层元素或整个信息。 使用 <br> 换行以保持格式不变
实例:
强调和倾斜
<p><a href="#">李宗苗</a>:车辆年检,<strong>195元/辆</strong>,<em>全深圳300万辆</em>,年收5.85亿元。</p>
缩写例子(使用 title 属性存放完整字词信息,使用 .initialism 类可以将缩略词大写,为了美观点。)
<p>例子:<abbr title="HyperText Markup Language 超文本标记语言">Html</abbr> 是自切片面包问世以来最棒的发明。</p>
地址实例(使用 <br> 换行)综合
<address>
<strong>TVlike</strong><em>文化有限</em>公司<br>
哪个省哪个市无名大道404号<br>
佚名大厦89层64号<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
引用
<blockquote> 用于引用外部内容的块级元素
cite 属性存放来源URL
.pull-left 和 .pull-right 决定是内容居左还是居右
<small> 可选元素,用于添加针对用户的引用,通常用于引言的作者。 可以将引言或出处置于 <cite> 标签内。
用 <blockquote> 嵌套 HTML 即可实现引用。 对于连续的引用内容,建议使用 <p> 标签。
还可以添加一个可选的 <small> 元素来表示引用的出处,该元素会利用样式在内容前加入宽度为一个字长的破折号 — 。
实例
<blockquote>
<p>我曾沾的光使我终身受益,因家庭牵连,我被关进监狱。五年的监狱生活,使我经受了磨难,锻炼了意志,学会了思考,懂得了公平,民主,法制对一个社会是多么重要;温饱,自由,尊严对一个人是多么重要!</p>
<small>薄熙来 于<cite title="">1993年3月于大连经贸会</cite></small>
</blockquote>
列表就是有无序(ul),有序(ol),自定义(dl)
2代码(行级/块状代码片段,展示你写的html元素源码)
行级代码片段
使用 <code> 包装行级代码片段(写小块代码)
基本块状内容
使用<pre> 对多行代码进行包装。 切记一定要对代码中的每个<>进行转义(<是<.>是>),这样方能得到正常的渲染结果。
注意: 尽可能地让 <pre> 左对齐;因为会渲染所有空格和tab(就是你键盘左边的那个tab键)。
还可以使用 .pre-scrollable 给代码区域设置350px的最大高度并设置一个纵向滚动条。
Google Prettify 美化代码
在 <pre> 元素上应用 .prettyprint 和 .linenums 增强代码渲染效果。 .linenums 用于显示行号。
实例
<code>section</code>
<pre class="prettyprint linenums pre-scrollable">
<p>示范文本...</p>
</pre>
3.表格:适用于展示扁平化的列表数据
<table> 用以包装表格化的数据
<thead> 容纳表格标题行 (<tr>)以标识表格列,
<tbody> 容纳表格行 (<tr>)
<tr> 容纳行内的一组单元格 (<td> or <th>)
<td> 默认的表格单元格
<th> 用于列头(或是行,取决于标签所在位置和区域)的特殊标签,必须置于 <thead> 标签内。
<caption> 表格用途的描述或摘要,对屏幕阅读器(视障人士读屏软件)非常有用
看一个例子机就知道了
<table>
<caption>…</caption>
<thead>
<tr>
<th>…</th>
<th>…</th>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
<td>…</td>
</tr>
</tbody>
</table>
表格选项
.table 行与行之间以水平线相隔
.table-bordered 表格外围均有外边框
.table-striped 奇数行背景设为浅灰色
.table-condensed 竖直方向padding缩减一半,从8px变为4px,所有的 td 和 th 元素都受影响
例子
1. 默认表格样式
<table>
…
</table>
2. 背景交替的表格
<table class="table table-striped">
…
</table>
3. 有边线的表格
<table class="table table-bordered">
…
</table>
4. 紧凑表格
<table class="table table-condensed">
…
</table>
5. 组合使用
<table class="table table-striped table-bordered table-condensed">
...
</table>
表单
包含四种布局
Bootstrap提供了下列四种表单布局:
垂直式布局 (默认)
搜索式布局
行式布局
水平式布局
四种布局虽然在标记上有不些许同,但都使用同样的表单控件,在表单行为上也是一致的。
控件状态以及其他
Bootstrap对于所有的基本表单控件(如input,textarea,select等等)都进行了样式定义。 同时也提供了一组自定义组件,比如前置/后置输入框和复合选框列表。
每种表单控件都有 error, warning, success 等不同状态,Bootstrap还包括了控件禁用时的样式。
四种表单
垂直式 (默认) .form-vertical (非必填,默认) 堆叠式的,所有控件的标签文字都左对齐
行式 .form-inline 标签文字左对齐,控件以inline-block紧凑形式存在
搜索式 .form-search 经典的搜索美化方案,对文本框进行圆化
水平式 .form-horizontal 左浮动,标签与其对应的控件居于同一行,标签文字右对齐
包含哪些控件
左侧即是bootstrap支持的所有默认表单控件:
文本输入框 (文本,密码,邮件等等)
复选框
单选框
下拉框
多选框
上传框
文本域
标记的例子
如何标记一个控件组。 需要用到 .control-group, .control-label, 和 .controls 类
<form>
<fieldset>
<legend>完善资料</legend>
<div>
<label for="input01">您的尊姓大名</label>
<div>
<input type="text" id="input01">
<p>字母,数字,汉字皆可</p>
</div>
</div>
</fieldset>
</form>
表单控件状态
focused 已获得焦点的输入框
uneditable-input 不可编辑的输入框
disabled 被禁用的输入框
inputWarning Warning状态
inputError Error状态
inputSuccess Success状态
按钮
btn
btn btn-primary
btn btn-info
btn btn-success
btn btn-warning
btn btn-danger
btn btn-inverse
多种尺寸
使用 .btn-large, .btn-small, 或 .btn-mini 可以得到三种不同尺寸的按钮。
用于动作的按钮
一般习惯下,按钮只用于动作,而超链接则用于对象。 比如,“下载”应该是一个按钮,而“最近的活动” 则应该是一个链接
使用 .btn 可以将按钮样式应到任何元素。不过一般来说,我们只对 <a> 和 <button> 元素使用按钮样式 ,还有input。
<a href="">超链接按钮</a>
<button type="submit">
button按钮
</button>
<input type="button" value="input-button按钮">
<input type="submit" value="input-submit按钮">
图标 由 Glyphicons 友情提供
使用css sprite
我们将所有图标放入一个文件中,这样就避免了每次使用不同图标时都发起额外的请求。 借助 background-position 修改背景位置,一整张图片可以显示出多个小图标。我们在twitter.com就是这么用的,效果不错。
和其他组件一样,出于命名和识别的方便,所有图标类都有一个 .icon- 前缀。 这样会避免与其他组件相冲突
如何使用
Bootstrap用 <i> 标签显示图标。图标类只有一个共同的前缀,没有基准类。 用法如下:
<i></i>
评论