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>


总结:
        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 来获得最新的消息和一些很棒的音乐视频。


你可能感兴趣的:(bootstrap,V4,V4,BootstrapV4,BootstrapV4)