发表于: 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>

  佚名大厦8964<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="">19933月于大连经贸会</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>



返回列表 返回列表
评论

    分享到