率先篇:初认识bootstrap

Bootstrap是同样缓慢时不胜流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以就此bootstrap搭建筑出简洁,清新的网站或者软件界面,有矣bootstrap这个利器后台开发人员再也不用发愁前高界面的搭建了。Bootstrap是twitter的工程师在业余时间开发之,在尽酷无比风靡的开源站点github上起源以后讯速成为该网站及更新最频繁的品类,大量工程师踊跃为该种贡献代码,短日内涌现出大气利用bootstrap搭建之网站。何以bootstrap发展速度会这样惊人呢?这主要得益于bootstrap的帅特性:

运动装备优先以针对移动的特色放在了篇号

浏览器支持:所有的主流浏览器都支持 Bootstrap

善达成亲手:只要您拥有 HTML 和 CSS 的基础知识,您就好开读书
Bootstrap

响应式设计:Bootstrap 的响应式 CSS
能够从适应被台式机、平板电脑与手机。

其含有了功能强大的搁组件,易于定制

 

下面我们来拘禁用bootstrap搭建出来的极简便易行的一个页面。

 

<!DOCTYPE html>

<html lang=”zh-cn”>

  <head>

    <meta charset=”utf-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width,
initial-scale=1″>

    <title>Bootstrap 101 Template</title>

 

    <!– Bootstrap –>

    <link href=”css/bootstrap.min.css” rel=”stylesheet”>

 

    <!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and
media queries –>

    <!– WARNING: Respond.js doesn’t work if you view the page via
file:// –>

    <!–[if lt IE 9]>

      <script
src=”http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;

      <script
src=”http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;

    <![endif]–>

  </head>

<body>

 

<div class=”container”>
  <div class=”jumbotron”>
    <h1>我的第一单 Bootstrap 页面</h1>
    <p>重置窗口大小,查看响应式效果!</p>
  </div>
  <div class=”row”>
    <div class=”col-sm-4″>
      <h3>Column 1</h3>
      <p>学的不仅是技巧,更是希望!</p>
      <p>再牛逼的冀望,也相当不鸣金收兵公傻逼似的坚持!</p>
    </div>
    <div class=”col-sm-4″>
      <h3>Column 2</h3>
      <p>学的不只是技术,更是要!</p>
      <p>再牛逼的期待,也当不歇你傻逼似的坚持!</p>
    </div>
    <div class=”col-sm-4″>
      <h3>Column 3</h3>
      <p>学的不仅仅是技术,更是希望!</p>
      <p>再牛逼的要,也等不停歇公傻逼似的坚持!</p>
    </div>
  </div>
</div>

</body>

</html>

相关文章