Bootstrap【前端框架的Bootstrap01】我们并来看望这家伙是呀

前言

自己感到自己之见识没有打开,关注的事物前前后后还是那么几样,诚然不强一门户怎么精前端,但是本着前者新技巧之眷顾还是得之,就拿我们今天一经说交之。

bootstrap,说实话,知道之要么说用过之人一定不多,认为好入门了而是没有听罢之bootstrap朋友可留个开口,我们来统计一下,若是人数众多以来,我们应该欣慰国内前端的小心原生或者感慨万千国内朋友之死呢?

扯远了,我耶是最近才接触到这块,也非说让人汗颜之内的语句,不懂学就寿终正寝了,我未清楚的而是多了,这里就来大概看看吧。

什么是bootstrap

http://www.bootcss.com/

bootstrap是一律法现成的CSS样式集合(做得还是颇投机之)。是片只推特的职工干出的。。。

他置的体裁非常完美,而且许多。给丁同一栽简单而无略的发,而且经过twitter成千上亿之使用,可见其精。

bootstrap特别契合那种没有设计师的团队(甚至说没前者的团伙),可以高速的出一个网页(我本一个抓信息安全之同窗特别薄自己,我说系统,他未要说我提到的凡网页,我说网站外啊说网页,那就算网页吧)。

因为bootstrap是因jquery的,所以还要闹好事者给他加以了过多插件,所以他转换得够呛恼火了。

bootstrap是基于Less的CSS预处理技术,于是我们也许也不亮LESS呢:

Less CSS预处理技术

LESS 是一个开源的样式语言,受到 Sass 的影响。
严格来说,LESS 是一个嵌套的元语言,符合语法规范的 CSS 语句也是符合规范的 Less 代码。

来个大概的例证:

  /* LESS*/

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

/* 生成的 CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

再来一个例子:

/* LESS*/

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

/* 生成的 CSS */

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

他这么对CSS3比和谐呢,可以少干很多政工的。

讫了他还不怎么模块化的物:

/*LESS*/

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* 生成的 CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

外于咱们的代码看上去越来越清晰了!是好是异常我这边尚看不到,因为我哉无熟悉呢。但是自认为只要效率达从来不问题吧,没照还确实能因此也!至于他的总得编译。无论是位于客户端或者服务器端,都是千篇一律种额外的支出所以。。。好了,我们回归正题吧

采取啊?

口是一个排斥的海洋生物,程序员特别显著!我呢格外显,所以自己实际是取得在雷同种植不极端情愿利用的情态在就学的。。至少自己弗是深情愿用于自身之色,至少不甘于用于自我之率先个档次。

以,他其实已干了好多事情了,事实上可以减小过多前端的干活,但是出一个题材即使,一来便利用的话语!

个人觉得:第一个档次即使以来,不便利前端团队的提高!

因为如果一个吓之成品来说,在增长齐半年的历程遭到,前端团队会形成不少好之事物:

1 设计的品格

2 CSS的作风,很多的体裁(下拉菜单、导航、按钮……)

3 jquery插件

但同做项目就是运了吧,以后肯定会延续推下去,我非晓得会无会见影响前端发展,我无明白会无会见毁原有的集团风格。

就假设一来就应用jquery和动了原生js一两年之食指平等,有无出题目自己这里说不好呀,我吗才刚好入门,这里就非讨论了,继续我们的话题。

初始化文件结构

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
 7     <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
 8 
 9 </head>
10 <body>
11 
12     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
13     <script src="js/bootstrap.js" type="text/javascript"></script>
14     <script  type="text/javascript">
15         $(document).ready(function () {
16 
17 
18         });
19     
20     </script>
21 </body>
22 </html>

然咱们尽管足以以bootstrap开发我们的网站啦!

基本样式

我这边虽充分粗略的尝试吧,先来单鲜排列布局了,因为咱们后面会借助他有一个实例.

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
 7     <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
 8     <style type="text/css">
 9         .main { background-color: #BBD8E9;  }
10         .aside { background-color: #DCEAF4;  }
11     </style>
12 </head>
13 <body>
14     <div class="container-fluid">
15         <div class="row-fluid">
16             <div class="span2 main">
17                 <!--Sidebar content-->
18                 dddddd
19             </div>
20             <div class="span10 aside">
21                 <!--Body content-->
22             </div>
23         </div>
24     </div>
25     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
26     <script src="js/bootstrap.js" type="text/javascript"></script>
27     <script type="text/javascript">
28         $(document).ready(function () {
29 
30 
31         });
32     
33     </script>
34 </body>
35 </html>

Bootstrap 1Bootstrap 2

 

咱俩来看,我们设要坐这布局实现我们的博客页,估计还要反一沾东西吧。

PS:我此发出只疑惑,我们布局之时光要之要搁前面,但是下此栅格系统后,反而为我发稍不好控制了也。。新手、新手

一部分样式:

Bootstrap 3

Bootstrap 4

PS:其实官网的东西特别详尽了,大家好去看吧,我还争先变成了抄啦

实战演练·我的博客页

光说不练假把式,搞了这么多,我们就来试试,我们能无克用外做出我们的博客页吧。我的博客页是反正布局的,于是我来操作,因为他煞是布局我从没来透,我们先来瞧导航。

导航

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
 7     <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
 8     <style type="text/css">
 9         .mystats { float: right; line-height: 20px; color: #555555; padding: 10px 5px; }
10         
11         .main { background-color: #BBD8E9; }
12         .aside { background-color: #DCEAF4; }
13     </style>
14 </head>
15 <body>
16     <div class="header">
17         <div class="navbar">
18             <div class="navbar-inner">
19                 <ul class="nav ">
20                     <li><a href="#">博客园</a> </li>
21                     <li class="active"><a href="#">首页</a></li>
22                     <li><a href="#">博问</a></li>
23                     <li><a href="#">闪存</a></li>
24                     <li><a href="#">新随笔</a></li>
25                     <li><a href="#">联系</a></li>
26                     <li><a href="#">订阅</a></li>
27                     <li><a href="#">管理</a></li>
28                 </ul>
29                 <div class="mystats">
30                     <!--done-->
31                     随笔-64&nbsp; 评论-844&nbsp; 文章-0&nbsp; trackbacks-0
32                 </div>
33             </div>
34         </div>
35     </div>
36     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
37     <script src="js/bootstrap.js" type="text/javascript"></script>
38     <script type="text/javascript">
39         $(document).ready(function () {
40 
41 
42         });
43     
44     </script>
45 </body>
46 </html>

Bootstrap 5

Bootstrap 6

Bootstrap 7

Bootstrap 8

说实话,自我深感微微Bootstrap不针对!应该是本人无因此好吧,没有如约我设想的法排列,于是我们现在召开一些移,看看外的css代码。

那撒,他本的代码洋洋洒洒几千履行,我这里还是友好改变下吧:

Bootstrap 9Bootstrap 10

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .mystats { float: right; line-height: 20px; color: #555555; padding: 10px 5px; }
        #btn-navbar { display: none; }


        .main { background-color: #BBD8E9; }
        .aside { background-color: #DCEAF4; }



        @media (min-width: 590px) and (max-width: 838px) {
            .navbar .nav { float: none; }

        }

        @media (min-width: 1px) and (max-width: 590px) {
            #btn-navbar { display: block; float: none; width: 100%; margin: 0; }
            .navbar-inner { padding: 0; min-height: 0; }
             .mystats { display: none; }
            .navbar-inner .nav { float: none; margin: 0; display: none; }
            .open .nav { display: block; }
            .navbar .nav > li { float: none; }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="navbar">
            <div class="navbar-inner">
                <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed"
                    id="btn-navbar" type="button">


                </button>
                <ul class="nav " id="nav">
                    <li><a href="#">博客园</a> </li>
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">博问</a></li>
                    <li><a href="#">闪存</a></li>
                    <li><a href="#">新随笔</a></li>
                    <li><a href="#">联系</a></li>
                    <li><a href="#">订阅</a></li>
                    <li><a href="#">管理</a></li>
                </ul>
                <div class="mystats">
                    <!--done-->
                    随笔-64&nbsp; 评论-844&nbsp; 文章-0&nbsp; trackbacks-0
                </div>
            </div>

            ddfdfdffd
        </div>
    </div>
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var btnNavbar = $('#btn-navbar');
            btnNavbar.click(function () {
                var el = $(this);
                var p = el.parent();

                var nav = $('#nav');
                if (p.hasClass('open')) {
                    p.removeClass('open');

                } else {
                    p.addClass('open');
                }
            });
        });

    </script>
</body>
</html>

View Code

 

Bootstrap 11

Bootstrap 12

Bootstrap 13

自家敢于肯定是自的题材。。。因为就边完全没有以我之覆辙出牌呢。。。我们简要看看这里的弹奏来导航,弹开时候整个页面会下拉,这不是本身想使的,但是改为absolute后更改又极其死,所以还是算了咔嚓,暂时这样了,我们继续。

结语

今日咱们小到此地吧,因为自己现在对群物还确确实实不了解,我重新看多学习下,下次再持续吧。

相关文章