Bootstrap -1(认识Bootstrap)

以你之姓@ 2022-07-12 05:02 214阅读 0赞

# 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">
        
        <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
      </head>

--------------------

> [Bootstrap-Knowledge][]  
> Jackdan9-Thinking

--------------------

[Bootstrap-Knowledge]: http://www.runoob.com