【BootStrap】 布局组件 II

BootStrap 布局组件 II

■  分页

  BS中通过.pagination的ul元素来实现一个分页集合,一个典型的分页如下:

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

  得到效果:
  

  由于分页键的本体仍然是一个超链接,所以依然可以适用.active和.disabled类来表示选中和禁用某个分页。同导航菜单中提到过的一样,这里的选中和禁用只是形式上的,实质上的选中和禁用应该要通过JS的逻辑判断和运算来实现。另外,还有.pagination-lg, .pagination-sm可以控制分页集合的整体大小。

  这是巨细的分页方式,还有一种分页方式就是通过当前页面的上一页和下一页进行页面跳转。这种上下页的翻页用的是.pager的ul元素实现。同时ul元素中可以让某两个li元素分别称为.previous和.next,BS会把这两个元素自动相对ul的父元素左对齐和右对齐使得更有上下页翻页的味道。实例:

<ul class="pager">
            <li class="previous"><a href="#">←previous</a></li>
            <li class="next"><a href="#">next→</a></li>
</ul> 

  效果:

  也可以在li元素中添加.disabled来使某个翻页键看起来被禁用了一样。

■  标签

  标签通常是以一个span的形式跟在其他一些文字后面,从功能上来说可以用来计数,提示等等。BS提供的标签的类主要有以下这些:

  .label  标签基础类

  .label-default  标签默认样式  

  .label-info/previous/warning/danger/success  不同着色的标签类型

  下面的实例试着将标签添加到导航菜单以及按钮中的文字中去:

       <ul class="nav nav-tabs">
            <li><a href="#">已读消息<span class="label label-default">20</span></a></li>
            <li><a href="#">未读消息<span class="label label-danger">5</span></a></li>
        </ul>
        <br>
        <button class="btn btn-default">Button<span class="label label-success">成功</span></button>

  效果:

■  徽章

  上面这个未读消息的标签,怎么看怎么有点违和感,主要是因为平时网页上看到的提示未读消息的往往是个圆圆的提示,这就是徽章。换言之,徽章和标签在用法上很类似,只不过徽章是椭圆形的,外形和标签不同。

  另外,徽章似乎没有那么多种着色方案,只有.badge类的span,颜色是灰色的徽章。比如:

        <ul class="nav nav-tabs" id="mynav">
            <li><a href="#">已读消息<span class="badge">20</span></a></li>
            <li><a href="#">未读消息<span class="badge">5</span></a></li>
            <li><a href="#">垃圾箱<span class="badge">12</span></a></li>
        </ul>

  效果:

  

■  页面标题

  这个页面标题不是<head>里面的<title>的标题。而是在页面上,显示的一个较为醒目的提示文字。用法非常简单,用一个.page-header的div来总括标题即可:

<body>
    <div class="page-header">
        <h1>Hello,<small>World</small></h1>
    </div>
    <p>Here is some content</p>
</body>

  效果:

  

  可以看到,BS自动为标题添加了一条下划线以隔开标题和内容。

■  缩略图

  在BS的CSS那篇曾经说到过关于BS中图片的一些样式,比如img-thumbnails等等,这些可以看做是图片的静态样式,而缩略图这个组件,可以让图片有一点动态效果。缩略图用到的是.thumbnail这个类,通常用超链接标签a来包裹一个img,一个常见的缩略图的写法应该是:

<a class="thumbnail" href="#">
    <img src="xxx.jpg" alt="Some Text" />
</a>

  这样得到的一个缩略图,外面有一圈灰色的相框,当鼠标移动到图片上面时这圈相框会变成蓝色,就有了一定的动态效果(也是因为标签是a的原因)

  通常在缩略图的附近应该要有一些文字按钮等附加的东西,可以用一个div把它们包起来就好了。比如下面这个实例:

   <div class="col-sm-6 col-md-3">
      <a class="thumbnail">
         <img src="../photo.jpg"
         alt="通用的占位符缩略图">
      </a>
      <div class="caption">
         <h3>缩略图标签</h3>
         <p>一些示例文本。一些示例文本。</p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               按钮            </a>
            <a href="#" class="btn btn-default" role="button">
               按钮            </a>
         </p>
      </div>
   </div>

  效果:

■  警告框

  可以用.alert类的div用于警告框的创建,一个简单的警告框可以包含.alert alert-xxx alert-dismissable这几个类:
  .alert类是警告框的基础类

  .alert-xxx代表不同严重程度的警告框,比如alert-info,alert-warning,alert-danger,alert-success

  .alert-dismissable可以让我们为警告框添加了一个叉,让用户可以在看完警告之后关闭警告框。

  实例:

<div class="alert alert-success alert-dismissable">
    <button class="close" data-dismiss="alert">x</button>
    <p>这是一条成功消息</p>
</div>
<div class="alert alert-warning alert-dismissable">
    <button class="close" data-dismiss="alert">x</button>
    <p>这是一条警告消息</p>
</div>
<div class="alert alert-danger alert-dismissable">
    <button class="close" data-dismiss="alert">x</button>
    <p>这是一条错误消息</p>
</div>

  效果:

  

  在这个实例中,消息是会自动浮动到最上面的,也就是说叉掉最上面的成功消息之后,剩下两个消息会往上移动。这是因为在删掉成功消息后,成功消息的那个div整个都被删除了。虽然看着很合理,但是我试了一下把这几条消息放到同一行的并排的几个网格中之后,发现不对。。删掉最左边的消息之后,右边的格式会发生某种不可描述的变化,我猜可能是BS设定的CSS和我给出的冲突了。所以从最佳实践的角度来说,还是应该把这些消息尽量铺满一整行地显示,以体现BS的实用性。

  顺便一提,如果想让消息的提示文字变成一个链接,且匹配这个消息的配色的话,那么BS为<a>提供了一个.alert-link类,可以用.alert-link的a来代替上面的p元素。

■  进度条

  一个基本的进度条的结构:

  先创建一个.progress的div,在这个div中加入一个.progress-bar的div,.progress-bar的div有css属性width,用百分比来调节这个width属性就是模拟了进度条的读条状态了。如果想要更加友好点可以考虑在这个div中加入一个<span class="text-center">里面放上一些提示文字。下面是一个通过设置定时来实现动态进度条的实例:

    <script>
        var progress = "0%";
        function startCount(){
            progress = parseInt(progress.replace("%",""));
            progress += 1;
            $("#progressbar").css({"width":progress.toString()+"%"});
            if (progress > 10) {
                $("#progressbar").find("span.text-center").text("已完成" + progress.toString() + "%");
            }
            if (progress < 100){
                t = setTimeout("startCount()",50);
            }
            else{
                clearTimeout(t)
            }
            progress = progress.toString()+"%"
        }
        $(document).ready(function(){
           $("#test").click(function(){
               startCount()
           });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width:0%" id="progressbar">
                <span class="text-center"></span>
            </div>
        </div>
        <button id="test">Start</button>
    </div>
</body>

  效果:

  进度条也有很多样式,比如

  progress-bar-striped  带条纹的进度条

  progress-striped  这个类是添加在比较上层的.progress的那个div里面,作用和progress-bar-striped一样都是让进度条带条纹,然后.progress progress-striped的div后面还可以再加个.active使得进度条的条纹也会动起来,看起来更加漂亮。

  progress-bar-info/success/warning/danger  各种配色的进度条

  单纯搞一个进度条甚至一个会动的进度条不是什么难事,难的是如何将进度条和实际的业务联系起来,使得进度条真的可以用来反映工作进度。

■  列表组

  列表组是一个不怎么常见的组件,其用法是向ul添加.list-group然后向此ul中的所有li元素添加.list-group-item类。如此可以得到一个简单的列表组:

                <ul class="list-group">
                    <li class="list-group-item">Item1</li>
                    <li class="list-group-item">Item2</li>
                    <li class="list-group-item">Item3<span class="badge">new</span></li>
                </ul>

  效果:

  这种的列表框只是展示,没有点击等功能。如果需要点击(也就是说列表框中的项应该是超链接的话)就只要把ul和li分别替换成div和a即可。替换成a之后自然也就可以进行.active和.disabled的操作了。

■  面板

  总的来说面板就是一块显示信息的地方,BS中的面板基础类是.panel,一个简单的面板应该是这样的:

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>This is panel title</h3>
                    </div>
                    <div class="panel-body">
                        <p>this is some content</p>
                    </div>
                    <div class="panel-footer">
                        <p>some footage</p>
                    </div>
                </div>

  效果:

  如此,一个面板有面板头(放置标题),面板体(必须存在,放置内容),和脚注部分组成。面板体中可以放各种各样的元素比如放个表格,列表组什么的使面板更加丰富。除了默认的这种灰灰的panel-default面板样式之外,我们还有panel-info/primary/warning/danger/success等各种不同的配色方案。需要注意的是脚注不属于面板的前景内容之一,所以即使配了色改变的仅仅是面板头和边框的颜色,脚注依然是灰灰的。

  顺便提一下,当要往面板体中加入表格时,可以不把表格写在面板体的div中,而是直接独立的接在面板头div的后面,成为面板头div的同级元素,这样得到的表格和面板头是无缝衔接的。其他的一些元素像列表组,导航菜单等等也都是这么个意思。总之.panel-body就像是一个.container,可以存放很多东西,但存放的同时也给他们加了一些margin,padding之类的样式参数。

■  凹陷容器

  .well类的div在视觉效果上是一种凹陷进去的容器,写出来供参考:

<div class="well">
    <p>This is well</p>
</div>

时间: 2024-10-06 09:33:56

【BootStrap】 布局组件 II的相关文章

Bootstrap 布局组件

Bootstrap 布局组件 1.Bootstrap字体图标 (1).字体图标列表链接 http://www.runoob.com/bootstrap/bootstrap-glyphicons.html (2).用法 如需使用图标,只需要简单地使用下面的代码即可.请在图标和文本之间保留适当的空间.没有glyphicon的css. <span class="glyphicon glyphicon-search"></span> (3).定制字体图标 我们已经看到如

Bootstrap——布局组件 新手学习笔记

1.字形图标: <button type="button" class="btn btn-primary btn-lg" style="font-size: 60px; color:#000000;"> <span class="glyphicon glyphicon-user"></span> User </button> 2.下拉菜单: <div class="

Bootstrap 布局组件(五)

1.Bootstrap 多媒体对象(Media Object) 这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. 媒体对象轻量标记.易于扩展的特性是通过向简单的标记应用 class 来实现的.你可以在 HTML 标签中添加以下两种形式来设置媒体对象: .media:该 class 允许将媒体对象里的多媒体(图像.视频.音频)浮动到内容区块的左边或者右边. .media-list

Bootstrap 布局组件(三)

1.Bootstrap 导航栏 1.1默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助于增加可访问性. 向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素.这会让文本看起来更大一号. 为了向导航栏添加链接,只需要

2016年5月31日上午(传智Bootstrap笔记(Bootstrap 布局组件输入框组))

一.Bootstrap 输入框组 本章将讲解 Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如您可以添加美元符号,或者在Twitter用户名前添加@,或者应用程序接口所需要的其他公共的元素. 向.form-control添加前缀或后缀元素的步骤如下: 把前缀或后缀元素放在一个带有.input-group 的 <div>

【BootStrap】 布局组件 I

BootStrap布局组件 I 除了在原生的HTML基础上进行了外观和类别上的改进,BS还包装了很多组件进库中,设计网页时我们可以方便地调用这些组件.下面来简略地介绍一下各种各样的组件 ■ 字体图标 Glyphicon BS的字体图标就可以理解成是一种内置好的小图标的库.调用时最常见的方法是这样的: <span class="glyphicon glyphicon-xxxxx"></span> 也就是说以span标签的形式代表一个小图标.这个span标签可以灵活

jQuery Easy UI Layout(布局)组件

layout 布局组件,依赖于panel,自己开发个web小程序的时候直接用这个组件布局很方便. 对于一个web程序原来说,特别是像我这种一遇到界面美化问题就找美工的程序员,想自己独立的开发一个东西,除了套用以前的项目中的界面布局之外就没别的 办法了,虽然我们可以用ifame切分出一个界面布局,但是我不会添加样式啊.使用layout组件就可以帮我们快速的有一个界面布局,而且美观效果也看得过去. 看个例子: <!doctype html> <html lang="en"

详解Bootstrap缩略图组件及警示框组件

缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息.bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合bootstrap的网格系统来实现.下面是bootstrap缩略图组件不同版本的源码文件: LESS :  tbumbnails.less SASS : _tbumbnails.scss 实现原理: 布局的实现主要依靠于bootstrap框架的网格系统,下面是缩略图对应的样式 .thumbnail {

bootstrap Typeahead组件

使用 Bootstrap Typeahead 组件 Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单的使用方式,就是直接在标记中声明,通过 data-provide="typeahead" 来声明这是一个 typeahead 组件,通过 data-source= 来提供数据.当然了,你还必须提供 bootstrap-typeahead.