2016年5月29日下午(传智Bootstrap(笔记二))

一、Bootstrap 排版

  1、行内文本样式

     <b>、<strong>、<i>、<em>、<del>、

  Bootstrap 提供了一些用于强调文本的类,如下面实例所示:

        <small>本行内容是在标签内</small><br>
        <strong>本行内容是在标签内</strong><br>
        <em>本行内容是在标签内,字体为斜体</em><br>
        <b>本行内容是在标签内</b><br>
        <i>本行内容是在标签内,字体为斜体</i><br>
        <del>本行内容是在标签内,有删除线</del><br>
        <s>本行内容是在标签内,有删除线</s>

     <s>注释:请使用 <del> 替代它!

     注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。HTML5 规范声明:使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。

     <i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。

      HTML 的默认强调标签 <small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。

  2、文本对齐样式:.text-left、.text-center、.text-right、.text-justify(只有IE浏览器支持)

        <p class="text-left">向左对齐文本</p>
        <p class="text-center">居中对齐文本</p>
        <p class="text-right">向右对齐文本</p>    

  3、列表样式:list-unstyled(无符号)、list-inline(行内块)

    (1)、list-unstyled(无符号):移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)

    (2)、list-inline(行内块):将所有列表项放置同一行

<body style="margin:200px;">
        <div class="container">
            <p>这个是list-unstyled的列表样式标签</p>
            <ul class="list-unstyled">
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111
                    <ul >
                        <li>2222222222222222222</li>
                        <li>2222222222222222222</li>
                        <li>2222222222222222222</li>
                    </ul>
                </li>
                <li>11111111111111</li>
            </ul>
            ---------------------------------------我是分割线----------------------------------------------
            <p>这个是list-inline的列表样式标签</p>
            <ul class="list-inline">
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>22222222222222</li>
                <li>22222222222222</li>
                <li>23333333333333</li>
                <li>33333333333333</li>
            </ul>
        </div>
    </body>

  效果图如下:

  4、表格样式:

  下表样式可用于表格中:

描述  
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
联合使用所有表格类

  (1).table:为 <table> 标签增加基本样式--很少的内补(padding)并只增加水平分隔线--只要为其增加 .table 类即可。

 <body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:50px;">
            <table class="table">
                <caption>基本的表格布局</caption>
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>城市</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                        </tr>
                        <tr>
                            <td>Sachin</td>
                            <td>Mumbai</td>
                        </tr>
                    </tbody>
            </table>
        </div>
    </body>

  (2).table-striped:通过添加 .table-striped class,有条纹的背景色行(隔行变色),如下面的实例所示:

 <body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:50px;">
            <table class="table table-striped">
                <caption>条纹表格布局</caption>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>城市</th>
                        <th>密码</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                    </tr>
                    <tr>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

  (3).table-bordered:带边框的表格,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:

<body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:50px;">
            <table class="table table-striped table-bordered">
                <caption>条纹表格布局</caption>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>城市</th>
                        <th>密码</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                    </tr>
                    <tr>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

  (4).table-hover:当指针悬停在行上时会出现浅灰色背景,(放上变色,离开恢复)如下面的实例所示:

<body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:50px;">
            <table class="table table-bordered table-hover">
                <caption>条纹表格布局</caption>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>城市</th>
                        <th>密码</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                    </tr>
                    <tr>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

              

  (4).table-condensed:行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

<body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:50px;">
            <table class="table table-bordered table-hover table-condensed">
                <caption>条纹表格布局</caption>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>城市</th>
                        <th>密码</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                    </tr>
                    <tr>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

                

  5、行或单元格背景色(<tr>, <th> 和 <td> 类)

    下表的类可用于表格的行或者单元格:

描述  
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

  (1)只能给<tr>或<td>来添加类样式;

<body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:20px;">
            <table class="table table-bordered table-hover table-condensed">
                <caption>上下文表格布局</caption>
                <thead>
                    <tr>
                        <th>产品</th>
                        <th>付款日期</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="active">
                        <td>产品1</td>
                        <td>23/11/2013</td>
                        <td>待发货</td>
                    </tr>
                    <tr class="success">
                        <td>产品2</td>
                        <td>10/11/2013</td>
                        <td>发货中</td>
                    </tr>
                    <tr class="info">
                        <td>产品3</td>
                        <td>10/11/2013</td>
                        <td>送货中</td>
                    </tr>
                    <tr  class="warning">
                        <td>产品3</td>
                        <td>20/10/2013</td>
                        <td>待确认</td>
                    </tr>
                    <tr  class="danger">
                        <td>产品4</td>
                        <td>20/10/2013</td>
                        <td>已退货</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

                        

  6、响应式表格(根据屏幕大小来变化)

    通过把任意的 .table 包在 .table-responsive内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

<body style="padding:50px;background-color:#ccc">
        <div class="table-responsive">
            <table class="table" style="background-color:#fff">
                <caption>响应式表格布局</caption>
                    <thead>
                        <tr>
                            <th>产品</th>
                            <th>付款日期</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="active">
                            <td>产品1</td>
                            <td>23/11/2013</td>
                            <td>待发货</td>
                        </tr>
                        <tr class="info">
                            <td>产品2</td>
                            <td>10/11/2013</td>
                            <td>发货中</td>
                        </tr>
                        <tr class="warning">
                            <td>产品3</td>
                            <td>20/10/2013</td>
                            <td>待确认</td>
                        </tr>
                        <tr class="danger">
                            <td>产品4</td>
                            <td>20/10/2013</td>
                            <td>已退货</td>
                        </tr>
                    </tbody>
            </table>
        </div>
    </body>

                         

  当屏幕宽度小于768px时,表格会出现滚动条;

  当屏幕宽度大于768px时,表格的滚动条自然消失。

<body style="padding:50px;background-color:#ccc">
        <div class="table-responsive">
            <table class="table" style="background-color:#fff">
                <tr class="danger">
                    <td>编号</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                </tr>
                <tr class="warning">
                    <td>编号</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                </tr>
            </table>
        </div>
    </body>

       

二、Bootstrap 辅助类

  1、文本

    以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗:

描述  
.text-muted "text-muted" 类的文本样式
.text-primary "text-primary" 类的文本样式
.text-success "text-success" 类的文本样式
.text-info "text-info" 类的文本样式
.text-warning "text-warning" 类的文本样式
.text-danger "text-danger" 类的文本样式
        <p class="text-muted">本行内容是减弱的</p>
        <p class="text-primary">本行内容带有一个 primary class</p>
        <p class="text-success">本行内容带有一个 success class</p>
        <p class="text-info">本行内容带有一个 info class</p>
        <p class="text-warning">本行内容带有一个 warning class</p>
        <p class="text-danger">本行内容带有一个 danger class</p>    

时间: 2024-11-10 00:20:56

2016年5月29日下午(传智Bootstrap(笔记二))的相关文章

2016年5月29日上午(菜鸟Bootstrap(less))

一.快速入门 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览器和 Rhino 平台上.网上有很多第三方工具帮助你编译 Less 源码.

软考信息系统监理师:2016年4月29日作业

软考信息系统监理师:2016年4月29日作业一.信息应用系统分析设计阶段监理1.需求分析的进入条件是什么?(记)2.需求分析的目标是什么?3.需求分析阶段的成果有哪些?(记)4.软件概要设计阶段的进入条件是什么?(记,并理解:加不加概要2字,答案均相同)5.软件详细设计阶段的进入条件是什么?6.描述算法除了流程图外,还有一些别的工具,如哪3种?7.软件设计阶段的成果是什么?(记)8.软件工程化要求以软件质量保证为核心,紧紧抓住哪8个主要环节?二.信息应用系统实施阶段监理1.编码阶段进入条件是什么

2016年04月29日【EPM-易通元】最新价位公布

2016年04月29日[EPM-易通元]最新价位公布   涨了.涨了.又涨了!   我们的「EPM易通元」天天见涨!太给力了!!   2016.04.29日今天已涨0,01美金,目前已到0.35美金啦!   如果你有1000个易通元,你今天就收益10美金   如果你有10000个易通元,今天就收益100美金   如果你有100000个易通元,你今天就收益1000美金.   恭喜买到「EPM易通元」的朋友们,买到即是赚到!   买入210美金到3500美金 :1美金:6.3人民币兑换,举例买入35

20.5 语音合成(百度2016年2月29日发布的tts引擎)

分类:C#.Android.VS2015: 创建日期:2016-03-17 一.简介 编写手机App时,有时需要使用文字转语音(Text to Speech)的功能,比如开车时阅读收到的短信.导航语音提示.界面中比较重要的信息通过语音强调.--等. 由于Android自带的Pico TTS并不支持中文,所以要既能阅读中文文本,还能阅读英文文本,必须下载第三方提供的能说中文的语音包. 二.申请百度tts授权 本节以百度2016年2月29日发布的"离在线融合语音合成SDK_Android 2.2.3

【EPM-易通元】2016年05月04日下午好消息公布

涨了.涨了.又涨了! 我们的「EPM易通元」天天见涨!太给力了!! 2016.05月04日今天下午已涨0.02美金,目前坼分已到0.22美金啦!如果你有1000个易通元,你今天就收益20美金 如果你有10000个易通元,今天就收益200美金 如果你有100000个易通元,你今天就收益2000美金 如果你有1000000个易通元,你今天就收益20000美金. 恭喜买到「EPM易通元」的朋友们,买到即是赚到! 买入210美金到3500美金 :1美金:6.3人民币兑换,举例买入3500美金(人民币22

2016年5月29日晚上(传智Bootstrap笔记五(表单2))

一.总表单实例 <body style="padding:50px;background-color:#ccc;"> <form class="form-horizontal"> <div class="form-group"> <label for="username" class="col-md-2 control-label">用户名:</labe

2016年5月29日晚上(传智Bootstrap笔记四(栅格系统 ))

一.栅格系统(网格系统) 1.栅格系统介绍 Bootstrap提供了一套响应式.移动设备优先的栅格系统.随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类. Bootstrap的栅格系统,由一个行和多个列构成.栅格系统通过行列的形式来创建网页布局,把具体的数据放入列当中. (注意:栅格系统,必须放在container和container-fluid之中) 移动设备优先策略 内容 决定什么是最

2016年5月29日晚上(传智Bootstrap笔记三(表单))

在本章中,我们将学习如何使用 Bootstrap 创建表单.Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 一.支持的表单控件 Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. (1)输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据. Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:te

2016年5月29日上午(传智Bootstrap(笔记一))

一.Bootstrap简介 简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集. 基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等. 要想使用Bootstrap,需要加载jquery.js 二.Bootstrap基本模板 HTML5文档类型定义.字符集设置.移动设备优先.引入css和js文件: (1)HTML5文档类型定义.