Bootstrap_1_基础

Bootstrap来自 Twitter是目前最受欢迎的前端框架。我不是写前端的，只是最近想写一个页面， 笔记记录如下。（没有知识体系，先做一个页面，再将每部分展开）

一、下载、安装、声明

下载：https://v3.bootcss.com
安装：推荐放在网站根目录的lib中
声明：在head标签中将相应的css和js引入， 有联网限制可以使用cdn加速

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="../static/styles/bootstrap.min.css">
<script type="text/javascript" src="../static/scripts/bootstrap.min.js">
</head>

注解：
1.min指的是最小化压缩版本，也可以下载源文件自己编译
2.依赖jquery，提前准备好jquery， 要先引用 jquery 的js 再引用bootstrap的js
3.学习版本：bootstrap v3.3.7 ， jquery-3.3.1
4.bootstrap移动设备优先，需要知道一些非常简单的html5、css、js知识

二、网格系统与布局

Grid System：
1.简言之，就是将页面分为12列，根据媒体查询@media这种css样式使得对于不同尺寸的屏幕，得到不同的显示效果。
2.规则：行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。使用行来创建列的水平组（class ="row"）。内容应该放置在列内，且唯有列可以是行的直接子元素。
3.预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。例如，要创建三个相等的列，则使用三个 .col-xs-4。
注释：
col-xs-* ： < 768px 超小设备
col-sm-* ： 768px 小型设备
col-md-* ：992px 中型设备
col-lg-* ： 1200px 大型设备
（col 列，*表示占用列数 ； row行数）

<div  class="container">
        <div class="row">
            <div class="col-md-4">
                <h1 class="page-header">学习笔记</h1>
                <p>媒体查询是非常别致的"有条件的CSS规则"。</p>
            </div>
            <div class="col-md-4">
                <h1 class="page-header">教程分享</h1>
                <p>媒体查询是非常别致的"有条件的CSS规则"。</p>
            </div>
            <div class="col-md-4">
                <h1 class="page-header">关于个人</h1>
                <p>媒体查询是非常别致的"有条件的CSS规则"。</p>
            </div>
        </div>  
    </div>

三、导航栏nav

导航栏就是nav包了一些元素：ul无序列表、form表单搜索框、logo元素。
1.给 nav添加样式：
<nav class="navbar navbar-inverse navbar-fixed-top">
注释 ：
navbar ：导航栏
navbar-default： 默认导航栏
navbar-inverse ： 反色导航栏
navbar-fixed-top：顶端固定
navbar-fixed-bottom：底端固定
navbar-static-top：固定位置

2.导航栏中文字：
<a href="index.html" class="navbar-brand" id="brand"><strong>AlexLJS</strong>.com</a>
注释：
navbar-brand ：一般用于logo，<a>标签
navbar-text：一般文字，<p>标签

3.表单&按钮：
<form class="navbar-form navbar-left" role="search">
注释：
navbar-form： 控制nav表单格式
navbar-left：左边浮动
<button type="submit" class="btn btn-default">提交</button>
navbar-btn ： 导航栏中按钮 ， 自动添加合适边距

4.响应式导航栏 ：
<div class="collapse navbar-collapse" id="responsive-navbar">
注释：
折叠起来的元素要包含在这个div中
最好给一个 id ，方便设置按钮找到div
<button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
navbar-toggle ：导航栏折叠按钮
data-toggle="collapse" ： 按钮功能，折叠
data-target= "#responsive-navbar "：找到要折叠的内容

四、图标&按钮

1.图标
组件地址：https://v3.bootcss.com/components/
例子：
搜索图标:<span class="glyphicon glyphicon-search"></span>
2.按钮：
属性： btn
例子 ：
<button type="button" class="btn btn-primary btn-sm">
btn-primary ：按钮样式 primary ， 或btn-success，仅颜色不同
btn-sm ： 控制按钮大小， lg最大号按钮
active ：按下状态

五、幻灯片

Bootstrap 的轮播（Carousel）插件，实现一种类似幻灯片的播放，非常常见。整体代码：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
       <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0"></li>
            <li data-target="#myCarousel" data-slide-to="1"class="active"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item ">
                <img src="imgs/timg1.jpg" alt="Blog">
                <div class="carousel-caption">
                    <h1>Blog</h1>
                    <p>111111</p>
                </div>
            </div>
            <div class="item active">
                <img src="imgs/timg2.jpg" alt="Geek3Mins">
                <div class="carousel-caption">
                <h1>Geek3Mins</h1>
                    <p>111111</p>
                    </div>
            </div>
            <div class="item">
                <img src="imgs/timg3.jpg" alt="Fast">
                <div class="carousel-caption">
                <h1>Fast</h1>
                    <p>111111</p>
                    </div>
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel" 
           data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="carousel-control right" href="#myCarousel" 
           data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>

注释：
1.<div id="myCarousel" class="carousel slide" data-ride="carousel">
carousel ：轮播插件
slide：缓慢滑动
data-ride="carousel"：页面加载时开始轮播
2.需要有序列表指定轮播指标
carousel-indicators：指标
active：当前活动
3.<a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a>
左侧按键，prev触发向左轮播，也可以跳到指定幻灯片数字位置。
glyphicon glyphicon-chevron-left：左侧箭头
4.轮播可以通过js代码触发许多其他事件

好啦，现在结合一些基本的html、css知识，可以做一个响应式主页。以后，我边做边把每个部分展开，也就能把我用到的提炼一下吧！