1.一、Bootstrap V4自学之路------起步---介绍

时间 2019-11-07

标签 bootstrap v4 自学之路起步介绍栏目 Bootstarp 繁體版

原文原文链接

若是快速创建bootstrap V4模板
css

DEMO敬上：html

<!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
node

由于学习过程当中，Bootstrap v4 alpha.2 出来了。因此学习过程当中有些总有一些出入。jquery

如今在复习阶段，也会开始进行修正。版本将使用alpha.2git

总结：
1.一、下面的<link>样式表粘贴到你的网页的<head>里面，放在在其余样式表文件以前。
web

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

1.二、把这个JavaScript插件以及JQuery放在你的网页的末尾附近，就在</body>标签前面。记住须要先添加jQuery，由于咱们的代码依赖于它。ajax

<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.三、Bootstrap V4 要求使用HTML5文档类型。不然可能出现不协调等因素。npm

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

1.四、因为Bootstrap是基于移动设备优先，因此必须在<head>标签内添加视图标签。bootstrap

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

1.五、盒尺寸c#

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

PS：这里我理解的是从新定义的.selector-for-some-widget类，将会修改全部嵌套的元素。（未验证）

1.六、Normalize.css

PS:这里个人理解是校订不一样的设备和浏览器中细小的不一样。

相似规定手机显示为1像素，PC网页显示2像素。（未验证）

1.七、社区 ---- 整段复制，各取所需。

要想始终关注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 来得到最新的消息和一些很棒的音乐视频。