Bootstrap快捷开发【前端Bootstrap框架】

2022-08-07 186

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Bootstrap快捷开发【前端Bootstrap框架】

Bootstrap是用于快速开发web应用程序和网站的前端框架。Bootstrap基于HTML、CSS和JavaScript。
在这里插入图片描述

基本结构

bootstrap提供了包含网格系统、链接样式和背景的基本结构。这将在bootstrap的基本结构中详细解释。
CSS:bootstrap具有以下特性：全局CSS设置、定义基本HTML元素样式、可扩展类和高级网格系统。这将在引导CSS部分详细解释。
组件：引导包含十多个可重用组件，用于创建图像、下拉菜单、导航、警告框、弹出框等。这将在布局组件部分详细解释。
JavaScript插件：bootstrap包含十多个自定义jQuery插件。您可以直接或逐个包含所有插件。

实例

<div class="container">
  <div class="jumbotron">
    <h1>黎燃我的第一个 Bootstrap 页面</h1>
    <p>黎燃</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>黎燃</p>
      <p>黎燃</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>黎燃</p>
      <p>黎燃</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>黎燃</p>
      <p>黎燃</p>
    </div>
  </div>
</div>

下载 Bootstrap

可以下载 Bootstrap 的最新版本

 http://getbootstrap.com/

在这里插入图片描述

预编译的 Bootstrap

在这里插入图片描述
如上图，可以看到已编译的CSS和JS（bootstrap.），以及已编译的压缩CSS和JS（bootstrap.min.）。它还包括字形的字体，这是一个可选的引导主题。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>在线尝试 Bootstrap 实例</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

      <h1>Hello, world!</h1>

</body>
</html>

超大屏幕

bootstrap支持的另一个特性是jumbotron。顾名思义，这个组件可以增加标题的大小，并为登录页的内容添加更多的边距。使用jumbotron的步骤如下：
创建with类。用于<div>的Jumbotron容器。
除了较大的字体外，字体重量减少到200。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <div class="jumbotron">
        <h1>欢迎登陆页面！</h1>
        <p>这是一个超大屏幕（Jumbotron）的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
            学习更多</a>
        </p>
    </div>
</div>

</body>
</html>

运行结果如下：
在这里插入图片描述
为了获得全宽无圆角的大屏幕，请使用。Jumbotron类以外的所有。容器类，如下：

<div class="jumbotron">
    <div class="container">
        <h1>欢迎登陆页面！</h1>
        <p>这是一个超大屏幕（Jumbotron）的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
         学习更多</a>
        </p>
    </div>
</div>

结果如下：
欢迎登陆页面！
这是一个超大屏幕（Jumbotron）的实例。
在这里插入图片描述