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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,813评论 1 92
  • 第一章 Bootstrap简介 定义 Bootstrap官网给出的解释是:简洁、直观、强悍、移动设备优先的前端开发...
    lvyweb阅读 1,368评论 1 10
  • 一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发...
    kmmyzi阅读 2,395评论 0 3
  • 这不是天方夜谭! 月亮湾, 那叶静静的小舟, 你低吟浅唱风雨无阻, 醉了阳春, 醉了婺源, 也醉了西北汉子。 这难...
    宗林的李阅读 352评论 7 7
  • 沙龙小记——2017.3.2星期四19:00-21:30 主题:讨论肖雨婷的毕业论文——混合错配安排对于税收协定的...
    鼓浪听涛岁月无声阅读 333评论 0 0