1.1、Bootstrap V4自学之路------起步---介绍

如果快速建立bootstrap V4模板

DEMO敬上:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  </body>
</html>

2016-03-27

因为学习过程中,Bootstrap v4 alpha.2 出来了。所以学习过程中有些总有一些出入。

现在在复习阶段,也会开始进行修正。版本将使用alpha.2


总结:
        1.1、下面的<link>样式表粘贴到你的网页的<head>里面,放在在其他样式表文件之前

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">

        1.2、把这个JavaScript插件以及JQuery放在你的网页的末尾附近,就在</body>标签前面。记住需要先添加jQuery,因为我们的代码依赖于它。

<script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

        1.3、Bootstrap V4 要求使用HTML5文档类型。否则可能出现不协调等因素。

<!DOCTYPE html>
<html lang="en">
   ... 
</html>

        1.4、由于Bootstrap是基于移动设备优先,所以必须在<head>标签内添加视图标签。

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

        1.5、盒尺寸

.selector-for-some-widget {
 -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;           
         box-sizing: content-box;
}

            PS:这里我理解的是重新定义的.selector-for-some-widget类,将会修改所有嵌套的元素。(未验证)

        1.6、Normalize.css

            PS:这里我的理解是校正不同的设备和浏览器中细小的不同。

                类似规定手机显示为1像素,PC网页显示2像素。(未验证)

        1.7、社区 ---- 整段复制,各取所需。

要想始终关注Bootstrap的最新开发进展,欢迎加入社区以获取有用的资源。
在推特上关注@getbootstrap on Twitter。
阅读并向The Official Bootstrap Blog投稿。
加入the official Slack room。
在 IRC 与 Bootstrap 人交谈。在 irc.freenode.net 服务器上,或者 ##bootstrap 频道里。
可在 Stack Overflow 中找到实施帮助(标记 twitter-bootstrap-3)。
为了获取最大的功能,请使用通过 npm 或者类似的传递机制来分发内容。开发者需要使用封装上的关键字 bootstrap,它能够改进或者增加 Bootstrap 的功能。
你也可以在推特上关注@getbootstrap 来获得最新的消息和一些很棒的音乐视频。


转载于:https://my.oschina.net/asktao/blog/609226

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值