twitter-bootstrap-3开始使用twitter-bootstrap-3


备注

Bootstrap是一个免费的开源前端Web框架,用于设计网站和Web应用程序。它包含基于HTML和CSS的设计模板,用于排版,表单,按钮,导航和其他界面组件,以及可选的JavaScript扩展。与许多Web框架不同,它只关注前端开发。

Bootstrap是GitHub上第二个最受欢迎的项目,拥有近100,000颗星和近45,000个分叉。

版本

发布日期
3.3.7 2016年7月25日

Bootstrap安装和入门

介绍
所以你想开始为你的项目使用bootstrap?大!然后让我们马上开始吧!

什么是引导程序? Bootstrap是一个开源库,您可以使用响应式设计和简单的代码来创建令人惊叹的响应式项目。响应式设计是一种设计理念,其中系统设计(表示和布局)根据设备的布局进行响应/调整。保持设计响应的主要原因是使用一系列设备将应用程序的范围扩大到更大的用户群。
安装
Bootstrap可以以多种不同方式安装,也可用于许多不同类型的项目。在下面的列表中,我已经放置了一些关于如何安装bootstrap的下载和教程链接
下载链接

  • 直接下载 - 下载链接
  • CDN - 来到这里
  • Bower - bower install bootstrap [读取]
  • NPM - npm install bootstrap [read]
  • 作曲家 - composer require twbs/bootstrap [阅读]
  • 自定义 - 我有你自己的配置,你可以在这里自定义。
  • Sass - 对于Sass相关项目,你可以[这里] [1]。

基本信息
所以你现在已经在你的项目中安装了bootstrap。现在是时候开始使用bootstrap的巨大优势了。首先,我将告诉你一些bootstrap的基本用法,之后我将展示一些小例子,最后我会给你一个启动代码示例,你可以用它作为起始模板!

网格系统
Bootstrap使用网格系统。该网格系统通常由12列组成。这12列中的每一列具有相同的宽度,但可以具有不同的高度。

所以我们有一个由12列组成的网格系统。我们可以使用这些列来构建我们的基本网站。让我们说我们想要实现以下布局:

菜单 - 全宽
侧边栏 - 屏幕的1/3
屏幕的主要内容 2/3
页脚 - 全宽

菜单
首先,我们将查看菜单。我们知道网格系统可以使用12列。由于我们想要全宽度的菜单,我们必须将菜单放在所有12列中。它看起来像下面的例子

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    Menu
</div>
 

通过给菜单一个col-lg-12类,我们指出以下内容:
col - classname中的col代表列。
lg - classname中的lg代表屏幕的宽度,在这种情况下是大的。
12 - classname中的12代表我们希望菜单拥有的列数。因为在这种情况下我们想要一个全宽的菜单,我们得到所有12列(12/12)

由于我们在菜单中使用了12列中的12列作为菜单,因此将在新行上设置。

侧边栏
我们要添加到模板的第二项是侧边栏。现在正如我所说,我们希望侧边栏是屏幕的1/3。所以我们要做的是将3列中的12列分开。我们现在知道要填充多少列以达到屏幕的1/3。请遵循以下代码。

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
 

与菜单相同,现在我们的菜单数量与菜单不同。
col - classname中的col代表列。
lg - classname中的lg代表屏幕的宽度,在这种情况下是大的。
4 - classname中的12代表我们希望侧边栏拥有的列数。因为在这种情况下我们希望侧边栏填满屏幕的1/3,所以我们只会抓住12列中的4列(4/12)

内容
现在,在这一行,我们的侧边栏旁边还有8列。所以现在我们将用我们的内容填补这些内容。请参阅下面的示例代码

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
 

现在,因为我们已经在这一行中填充了12列的剩余8列,所以下一节将再次从具有12列的新行开始。

页脚
页脚,就像菜单将成为屏幕上的全宽块一样,所以我们将在这一行中抓取所有12列为我们的页脚,请参阅下面的示例代码。

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The footer
</div>i are described below.
 

所以现在我们创建了一个非常小的html文件,我们的第一个bootstrap模板。但这是非常基础的。通常我们会更多地形成这个代码,以便为它提供完整的引导体验。其中一些经验如下所述。

使用行和容器正如我在上面的简单示例中所述,bootstrap使用12列的行。当一行填充12列时,bootstrap将在新行上启动。显示这些行的最佳方法是使用行类。我们还将使用容器类。这就像一个body标签,在这个容器中我们将放置所有代码。您可以选择容器或容器流体类。唯一的区别是容器流体类使用屏幕的整个宽度而容器类不使用。这些基本功能的一个例子如下。

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The menu consisting of 12 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            The sidebar consisting of 4 columns
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            The main content consisting of 8 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The footer consisting of 12 columns
        </div>
    </div>
</div>
 

所以我们现在用bootstrap创建了一个完整的页面模板。这是一个非常简单的,但从基础开始,之后您将能够使用各种引导类和功能。最后一件事。类中的lg-md-sm和xs列名对应,就像我告诉页面的宽度一样。 LarGe,MeDium,SMall和XSmall。不要忘记,通过更改列数,您可以使用它来在不同宽度上对列进行不同的样式设置。记得整行包含12列!

有关更多信息,请访问: http//getbootstrap.com/ <br?有关很好的示例,请访问: http//expo.getbootstrap.comhttp://bootsnipp.com/

如果您希望我添加更多信息,或者您遇到一些问题,请告诉我们!并祝你们快乐!

你好,世界

以下HTML 页面说明了使用Bootstrap 3 的简单Hello World页面。

该页面包含一个全宽导航栏,其中包含示例链接和下拉控件。导航栏利用了Bootstrap的移动优先功能。它在移动视图中开始折叠,并随着可用视口宽度的增加而变为水平。

此外,还使用了一个jumbotron 元素来显示特色信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Hello World</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>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Hello, World!</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
 

安装

用法

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

引用js文件的引用是使用body标签上方的脚本标记进行的(见下文)。还要注意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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>