当前位置: 首页 > 编程笔记 >

twitter-bootstrap-3 安装

沈俊美
2023-03-14
本文向大家介绍twitter-bootstrap-3 安装,包括了twitter-bootstrap-3 安装的使用技巧和注意事项,需要的朋友参考一下

示例

  • 直接下载-下载链接

  • CDN-到达这里

  • 凉亭- bower install bootstrap[阅读]

  • NPM - npm install bootstrap[阅读]

  • 作曲家- composer require twbs/bootstrap[阅读]

  • 自定义-我有自己的配置,可以在此处自定义

  • Sass-对于Sass相关项目,您可以在这里获得。

用法

<head>
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>

使用body标签上方的script标签来引用bootstrap js文件(请参见下文)。另外请注意,bootstrap对大多数小部件都使用jQuery,例如手风琴轮播等。因此,请在jQuery js文件下面引用bootstrap js文件。

    **样品**

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

<head>

  <title>Form Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h2>Form Email</h2>
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

  <script xx_src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
  <script xx_src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>
           

 类似资料:
  • 问题内容: 我正在使用新的Twitter Bootstrap创建一个网站。该网站看起来不错,并且可以在除IE8之外的所有必需浏览器中使用。 在IE8中,它似乎在显示移动版本的元素,但延伸到了我的桌面的全屏。我认为我遇到的问题是Twitter引导程序首先是移动设备。因此出于某些原因,IE8会选择此选项。 我还注意到,该类似乎并未按预期引入max-width CSS属性。谁能看到我做错了什么? 问题答

  • 问题内容: 我正在尝试使用twitter bootstrap 3 进行两列 全高 布局。似乎 twitter bootstrap 3 不支持全高布局。我想做的事: 如果内容增加,则导航也应增加。 每个父母的身高100%无效,因为在某些情况下内容为一行。 绝对位置似乎是错误的方法 而解决这个问题,但它是胜之不武 的HTML: 有没有办法使它与默认的 twitter bootstrap 3 类一起使用

  • 我已经使用twitter bootstrap框架很长一段时间了,它们最近更新到了版本3! 我很难让粘脚粘到底,我使用了twitter引导网站提供的入门模板,但仍然没有运气,有什么想法吗?

  • 问题内容: 如何在Twitter Bootstrap 3的容器(12列)中将一列大小的div居中? 我想要一个类,该类在容器内居中。如果有多个s,我可能会使用一行,但是现在我只想要a ,其大小以一列为中心位于容器内(12列)。 我也不确定上述方法是否足够好,因为其目的不是要抵消一半。我不需要外部的自由空间,并且内容的内容按比例缩小。我想在div外部留出空间以使其均匀分布 (缩小直到容器宽度等于一列

  • 问题内容: 我是一个Bootstrap新手,我有一个100%宽的模板,希望使用Bootstrap进行编码。第一列从左上角开始,我在Google地图上将拉伸范围扩展到最右边。我以为我可以在课堂上做到这一点,但这似乎不再可用。我不知道如何使用bootstrap 3来实现该布局。我正在使用themeforest中的Geometry PSD模板 问题答案: 对于Bootstrap 3,您将需要使用自定义包

  • 问题内容: 以前对此有疑问: Twitter BootstrapCSS,支持RTL语言 但是所有答案对于Bootstrap 2.x都是有好处的 我正在使用阿拉伯语(rtl)项目,并且我需要从右到左引导3.x。 有人知道解决办法吗? 问题答案: 我强烈推荐 bootstrap-rtl 。它是基于Bootstrap核心构建的,并且由于它是引导主题而添加了rtl支持。这将使您的代码更具可维护性,因为您始