Bootstrap简介
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
有以下几个特点:
- 移动设备优先
- 浏览器支持
- 容易上手:只要具备 HTML 和 CSS 的基础知识、
- 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
Bootstrap网格系统
它的代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。
移动设备优先策略
- 内容
决定什么是最重要的。 - 布局
优先设计更小的宽度。
基础的 CSS 是移动设备优先,媒体查询是针对于平板电脑、台式电脑。 - 渐进增强
随着屏幕大小的增加而添加元素。
工作原理
- 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
- 使用行来创建列的水平组。
- 内容应该放置在列内,且唯有列可以是行的直接子元素。
- 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。
网格选项
Bootstrap 网格系统跨多个设备工作:
下面是基本的网格结构:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
Bootstrap 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单,只需要简单地在一个 .btn-group 容器中放置按钮和下拉菜单即可。也可以使用 来指示按钮作为下拉菜单。
简单的按钮下拉菜单代码:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">功能</a>
</li>
<li>
<a href="#">另一个功能</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div>
浏览器显示效果如下:
Bootstrap徽章
徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把 <span class="badge">
添加到链接、Bootstrap 导航等这些元素上即可。
<a href="#">Mailbox <span class="badge">50</span></a>
显示的徽章图案是这样的:
Bootstrap 列表组
步骤
如下:
- 向元素
<ul>
添加 class .list-group。 - 向
<li>
添加 class .list-group-item。
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window 空间托管</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item">24*7 支持</li>
<li class="list-group-item">每年更新成本</li>
</ul>
向列表组添加链接
通过使用锚标签代替列表项,我们可以向列表组添加链接。我们需要使用 代替
- 元素。代码如下:
-
<a href="#" class="list-group-item active"> 免费域名注册 </a> <a href="#" class="list-group-item">24*7 支持</a> <a href="#" class="list-group-item">免费 Window 空间托管</a> <a href="#" class="list-group-item">图像的数量</a> <a href="#" class="list-group-item">每年更新成本</a>
浏览器显示图:
利用Bootstrap创建一个网页
按照课上看的代码复习了一篇诗经:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron text-center" style="margin-bottom:0"> <h1>《诗经.邶风.击鼓》</h1> <p>学习</p> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">介绍</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">原文</a></li> <li><a href="#">注释</a></li> <li><a href="#">赏析</a></li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-sm-4"> <h2>击鼓</h2> <p>击鼓其镗,踊跃用兵。土国城漕,我独南行。</p> <p>从孙子仲,平陈与宋。不我以归,忧心有忡。</p> <p>爰居爰处?爰丧其马?于以求之?于林之下。</p> <p>死生契阔,与子成说。执子之手,与子偕老。</p> <p>于嗟阔兮,不我活兮。于嗟洵兮,不我信兮。</p> <hr class="hidden-sm hidden-md hidden-lg"> </div> </div> </div> <div class="jumbotron text-center" style="margin-bottom:0"> <p>等待完善</p> </div> </body> </html>
结果显示如下:
期待后面能把页面完善。
下周见!