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

最新推荐文章于 2022-12-06 17:46:13 发布

weixin_33709590

最新推荐文章于 2022-12-06 17:46:13 发布

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/asktao/blog/609226

版权

为什么80%的码农都做不了架构师？>>>

如果快速建立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