零基础学习前端-从bootstrap开始(一)

随着移动互联网的兴起，Web技术也在发生着深刻的变化，后台、前端与几年前比已不可同日而语。近日Chrome浏览器宣布不再支持Flash插件，曾经的辉煌已走向没落，HTML5必将大行其道。作为一个从Turbo C、MFC、Qt、.net WinForm一路走来的程序员，其实已被潮流远远的甩在了后面，曾经非常鄙视PHP、JSP、ASP的网页制作技术，认为那根本不算编程，也不算语言，没有技术含量，而现在MFC、WinForm此类的技术几乎没有了市场，其实几年前已成这样，只是工作的原因，一直在用着它们，不知道国内还有多少程序员处于此种境地，既然发现了问题，就应该尝试着去改变，否则就像温水煮青蛙一样，在一个小环境中慢慢的沉寂，终究会死去。
工作后会发现，其实与技术打交道其实是最简单的，一台能联网的计算机，基本就能搞定一切，每天能有所学，有所长进，内心才会有一点点的充实感，积累起来，也许就能慢慢的变成软实力。
至于为什么选择前端，为什么选择bootstrap，很简单，自己不会，就可以也应该去学，对我而言，这些都是零基础，这也只是个开始。

工具
notepad++、Sublime Text、Dreamweaver都是不错的工具，推荐Sublime Text

Bootstrap
对于Bootstrap,之前看过一些视频教程、中文的文档，但效果都不好，这两天从网上了下载了一个离线的官方英文文档，照着里边的例子一个个敲一遍，最开始的时候就是照敲，一两个例子过后，在敲之前就会想它这个页面是怎么实现的，如果是我，我会用什么class去做，为什么我敲出来的与例子不一样，问自己一系列问题，然后把他们都搞明白。期间就会接触到HTML、CSS、JS的知识，再一个个的去学习，去积累。

bootstrap中修饰段落的一些类

<p class="lead">
<p class="text-warning">

HTML标签
hr会产生一条线的效果

<hr>
<br>

bootstrapgrid system
4 ties xs,sm,md,lg,each tier scales up(4个层级，向上扩展)

<div class="clearfix visible-xs"></div>

上述代码官方的解释是clear floats at specific breakpoint to prevent awkward wrapping with uneven content.只看解释很难懂，敲一遍代码，再通过添加这句与不添加这句的效果对比，非常清晰。

<div class="row">
        <div class="col-xs-6 col-sm-3">
          .col-xs-6 .col-sm-3
          <br>
          Resize your viewport or check it out on your phone for an example.
        </div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      </div>

通过比较，很容易理解

css选择器

[class*="col-"]{...}

text-align: center;
padding-top: 50px;
padding-bottom: 20px;
max-width: 730px;

a标签作为button

<a class="btn btn-primary btn-lg">快到碗里来</a>

双箭头标志：»
版权标志：©

&raquo;
&copy;

页脚可以用footer

零基础学习前端-从bootstrap开始(一)

猜你喜欢