Bootstrap学习笔记一

什么是bootstrap

h5的流式，响应式布局，

bootstrap能干什么

当你缺少美工，而且想快速建立一个美观三端实用的网站，bootstrap是一个很好的选择

学习bootstrap需要什么

需要html5 CSS3 Jquery javascript基础

开始学习bootstrap

首先bootstrap其实就是一个帮你写好的css js 库而已，引入需要的列头

放到<head>标签下

 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

然后我们来做一个简单的例子

bootstrap 的布局方式非常类似于表格布局

看下面这个例子

<div class="container">
        <div class="row">
            <div class="col-md-12">
               <h1>这是一个bootstrap开始页面</h1>
            </div>
        </div>
    </div>

效果就是这样的

首先如果你想开始一个bootstrap页面 那么要从class="container"开始，这相当于table中的<table>标签

然后 你想开始一个行必须使用class="row"标签，相当于table中的<tr>标签

大家都知道，这两个标签是不能放元素的，一般都会放在<td>标签中

所以要放在class="col-大小-列"的div中

这个div定义了

首先说这个 “col-大小-列”这个列的参数的作用

首先bootstrap 是把一个单元格分成12列的，最多12列

他永远都是12列，如果你写col-大小-6这个代表，我用了

6/12的大小，就是2分之一，如果你想画4列

4/12的打小，就是三分之一，如图所示

 

posted @ 2017-08-04 17:02  情殇难愈  阅读(108)  评论(0)  编辑  收藏  举报