zoukankan      html  css  js  c++  java
  • Bootstrap前端UI工具包学习笔记

        刚刚接触到Bootstrap的前端工具包,对于我们这些做后台程序开发的,如果要做出美观的UI,真的是赶鸭子上架,太难了。不过Bootstrap可以解决这一难题,看到讲解这方面资料的东西不多,绝大多数还需要去阅读英文资料,虽然不难,但是难免有英文比较差的朋友。在这我就大概把Bootstrap所有我个人觉得常用的讲解一下,也是学习笔记。下面附图就是我学习中的实例图。

        怎么样,如果专心排版,你几乎不用写一行css代码,部分用行内样式表就可以做出不错的网站UI。

        废话不说了,开始吧。引入Bootstrap相关文件,bootstrap/js/jquery.min.js bootstrap/css/bootstrap.min.css bootstrap/css/bootstrap-responsive.min.css 

    bootstrap/js/bootstrap.min.js主要就是这四个文件,加载进来以后就可以开始写了。都写在body标签之内哦。

    <div class="container">
    
        <div class="row"><!--row-fluid可以表示自动百分比-->
                     <div class="span4">1</div>
                    <div class="span4">2</div>
                    <div class="span4">3</div>
                </div>
    </div>

        这就是一个简单的一行三列排版,以后排版都写在 类container这个标签里面 这个类换成container-fluid类就是那种按照浏览器比例的相对布局,每一列布局都是用<div class='row'>开始,然后在里面写上列的布局,这里类可以换成row-fluid也表示相对布局,列布局类span1-12就是把一个整行分成了12列,你可以任意组合,只要结果是12即可。

    布局就这么简单,以后代码尽量都是在这些布局列里面写。

        1.字体效果,这里有好几种,比如<h1>到<h6>,字体越来越小,颜色也是有变化的,这和默认不同的。

    <strong>标签就是黑体字比较大,<em>是斜体字,<abbr title='描述' class='initialism'>带描述title属性 initialism类用来转换成大写</abbr>

    <blockquote class="pull-right">用于显示引用内容<small>有特殊用处</small></blockquote>注意一下pull-left类用于左边显示。

    差不多字体控制就这几种,里面有一个特殊显示小图片的就是i标签,使用例子<i class="icon-pencil"></i>就是编辑图标。

        2.3种列表显示就是ol ul dl分别没有多少修改,<ul class="unstyled">用于去除默认样式,<dl class="dl-horizontal">用于标题内容同一行显示。其他效果需要自己写css控制了。

        3.表格效果<table class="table table-striped table-bordered table-condensed">这些类我们可以只用其中一个或者全部,不过建议全部用上,没啥说的,这样自动会隔行变色等。

        4.表单效果,这个算是最复杂的,比较多,主要说说按钮,它可以使用a button标记来制作按钮,按钮类都是btn开始,用于颜色控制的有六种,具体代码看我的例子,里面基本包括了所有样式实例,还有一种就是标签颜色,和按钮类似不多说了。

        5.菜单效果,这也是真复杂的,里面有下拉菜单,切换tab分格,以及比较好用的顶端菜单,上面截图绿色的就是。具体看我的附件代码段。

        6.js效果,这里有图片轮换效果,遮罩层效果,以及其他动画效果,提示等等,都是比较常用的效果,需要Jquery代码,我的附件里面基本也都是有的。

        7.最后总结一下,我没有具体讲解,不过我的附件里面效果都有了,基本上是Bootstrap全部内容,不过要想布局出漂亮的UI,还是需要一番功夫的,要看你的审美观了。里面颜色都是可以配置的。

        附件下载,包括了Bootstrap包了。

        地址https://files.cnblogs.com/logoove/Bootstrap.rar

    (原创文章 By Yoby)

  • 相关阅读:
    XAML学习笔记之Layout(五)——ViewBox
    XAML学习笔记——Layout(三)
    XAML学习笔记——Layout(二)
    XAML学习笔记——Layout(一)
    从0开始搭建SQL Server 2012 AlwaysOn 第三篇(安装数据,配置AlwaysOn)
    从0开始搭建SQL Server 2012 AlwaysOn 第二篇(配置故障转移集群)
    从0开始搭建SQL Server 2012 AlwaysOn 第一篇(AD域与DNS)
    Sql Server 2012 事务复制遇到的问题及解决方式
    Sql Server 2008R2升级 Sql Server 2012 问题
    第一次ACM
  • 原文地址:https://www.cnblogs.com/logoove/p/Bootstrap.html
Copyright © 2011-2022 走看看