Bootstrap【前端框架之Bootstrap01】我们一同来看望这厮是如何

运用与否?

人是三个排斥的古生物,程序员尤其显明!笔者也很分明,所以自身实际是抱着一种不太愿意利用的态势在读书的。。至少小编不是很愿意用于自身的类型,至少不情愿用于本身的率先个项目。

因为,他骨子里早就干了不少工作了,事实上能够削减过多前端的做事,可是有2个标题不怕,一来便利用的话!

村办认为:第一个连串便利用以来,不便宜前端团队的前进!

因为若是2个好的出品以来,在长达7个月的历程中,前端团队会形成不少和好的事物:

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开发我们的网站啦!

什么是bootstrap

http://www.bootcss.com/

bootstrap是一套取现金成的CSS样式集合(做得依然很温馨的)。是多个推文(Tweet)的职员和工人干出来的。。。

他内置的体裁很赏心悦目貌,而且不少。给人一种简单而不简单的感觉到,而且经过twitter成千上亿的选择,可知其当者披靡。

bootstrap尤其符合那种没有设计师的团伙(甚至说并未前者的公司),能够飞速的出贰个网页(笔者原本叁个搞消息安全的同学10分瞧不起本人,笔者说系统,他非要说小编干的是网页,笔者说网站他也说网页,那就网页吧)。

因为bootstrap是依照jquery的,所以又有好事者给她加了好多插件,所以他变得极红了。

bootstrap是根据Less的CSS预处理技术,于是大家兴许也不清楚LESS呢:

大旨样式

本身那边就很简单的尝试吧,先来个两列布局了,因为大家后边会凭借他出1个实例.

 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

说实话,自个儿感到有个别不对!应该是自个儿从未用行吗,没有依据自身想象的方法排列,于是我们后日做一些改观,看看她的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后改变又太大,所以依旧算了吧,暂且那样了,咱们后续。

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;
}

她让我们的代码看上去越来越清楚了!是好是坏小编那里还看不到,因为自个儿也面生呢。不过作者觉着只要功效上没难题的话,没准还真能用呢!至于她的总得编写翻译。无论是位于客户端依然服务器端,都以一种额外的费用所以。。。好了,我们回归正题吧

前言

自身备感自身的视界没有打开,关心的东西前前后后都是那么几样,诚然不精一门怎么精前端,不过对前者新技巧的关注还是供给的,就拿我们今日要说到的。

bootstrap,说实话,知道的要么说用过的人自然不多,认为本身入门掌握而没听过的bootstrap朋友能够留个言,我们来总计一下,假使人数众多以来,大家理应欣慰国内前端的注目原生也许感慨万千国内朋友的梗塞呢?

扯远了,小编也是近日才接触到那块,也不说令人汗颜之内的话,不懂学就完了,小编不懂的可多了,那里就来总结看看啊。

相关文章