Bootstrap -1(认识Bootstrap)

最新推荐文章于 2021-11-22 21:30:00 发布

前端Baymax

最新推荐文章于 2021-11-22 21:30:00 发布

阅读量2k

点赞数 1

分类专栏：趣味前端文章标签： bootstrap javascript html css

本文链接：https://blog.csdn.net/XXJ19950917/article/details/54996306

版权

趣味前端专栏收录该内容

61 篇文章 2 订阅

订阅专栏

Bootstrap -1(认识Bootstrap)

Bootstrap的由来:
- Bootstrap是被Twitter那群天才工程师(主要是Mark Otto和Jaccob Thornton)发现并研发出来的,为什么说他们天才, 我会在后续给出我的理由,并介绍我的学习过程.
- Bootstrap是目前最受欢迎的前端框架,Bootstrap是基于HTML, CSS, JavaScript的, 比较全方面的框架,它简单灵活(其他框架认识并上手使用), 使得Web开发更加快捷.
- Bootstrap是2011年8月在Github上公布,Github的出现帮了我一个很大的忙, 感谢Github.

为什么Bootstrap如此受欢迎了？
- 移动设备优先: 自Bootstrap3起, 框架包含了贯穿整个库的移动设备优先的样式.(特别有先见之名).
- 浏览器支持:所有的主流浏览器都支持Bootstrap.(IE, Firefox, Chrome, Opera, Safari),(兼并PC端及移动端).
- 容易上手:只要具备HTML和CSS的基础知识, 就可以开始学习Bootstrap.
- **响应式设计:**Bootstrap的响应式CSS能够自适应于台式、平板电脑和手机.
- Bootstrap为开发人员创建接口提供了一个简洁统一的解决方案.
- Bootstrap包含了功能强大的内置组件, 易于定制.
- Bootstrap还提供了基于Web的定制.
- Bootstrap是开源的.(Open Source).

Bootstrap包的内容?
- **基本结构:**Bootstrap提供了一个带有网络系统、链接样式、背景的基本结构.
- CSS: Bootstrap自带以下特性: 全局的CSS设置、定义基本的HTML样式、可扩展的class、先进的网络系统.
- 组件: Bootstrap包含了十几个可重用的组件, 用于创建图像、下拉菜单、导航、警告框、弹出框等等.
- JavaScript插件: Bootstrap包含了十几个自定义的jQuery插件.可以直接包含所有的插件, 也可以逐个包含这些插件.
- 定制:可以定制Bootstrap的组件, LESS变量和jQuery插件来得到自己的版本.

在线实例:

<div class="container">
    <div class="jumbotron">
        <h1>First Bootstrap Page</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>

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<div class="table-responsive">
    <table class="table table-striped table-bordered">
        <thead>
     <tr>
       <th>#</th>
       <th>Name</th>
       <th>Street</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td>Anna Awesome</td>
       <td>Broome Street</td>
     </tr>
     <tr>
       <td>2</td>
       <td>Debbie Dallas</td>
       <td>Houston Street</td>
     </tr>
     <tr>
       <td>3</td>
       <td>John Doe</td>
       <td>Madison Street</td>
     </tr>
    </table>
</div>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>