Bootstrap入门记录

bootstrap说好的要使用，总是看了一遍又一遍的文档，其实还是不会。
这个活计是个手艺活，需要练习。这里记录一下最简单的入门过程，入了门其他的去看官方文档就好的多了。

引入css和js

<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

Demo

这里算是说明吧，bootstrap全靠css的样式支撑，大量的使用div 和 ul，li 这些标签，而且所说的特点什么流式布局，栅格都是基于 class的。

流式布局

<div class="container-fluid">

导航

<nav class="nav navbar-default navbar-fixed-top">
<div class="collapse navbar-collapse">
<ul class="dropdown-menu">
<div class="navbar-form navbar-right">

栅格

<div class="col-md-9">

屏幕12格，md是一般的屏幕，超大是lg，剩下的看官方文档吧，详细。

列表

<div class="list-group">
<div class="list-group-item" style="border: 0;">

侧边栏

<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-body">

图标

<span class="glyphicon glyphicon-user"></span>

面包屑

<ul class="breadcrumb">
<li>
<a href="#" class="text-muted">开发语言</a>
</li>
<li>
<a href="#" class="text-muted">Web课程</a>
</li>
</ul>

TAB

<ul class="nav nav-tabs" id="myTabs">
<li class="active">
<a href="#tyxw" data-toggle="tab">体育新闻</a>

                    </li>
                    <li>
                        <a href="#cjbd" data-toggle="tab">财经报道</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tyxw">
                        <p>
                            <a href="#">甜瓜单节16分爆发力太恐怖 | 汤神三分钟就超全队 </a><span class="pull-right">2016年7月27日</span></p></div>
                    <div class="tab-pane fade" id="cjbd">
                        <p>
                            <a href="#">央行公开市场进行1800亿逆回购 人民币小幅走高 </a>
                        </p>
                    </div>
                </div>

结束

Paste_Image.png