Bootstrap学习笔记（更新中）

#列表

 1、列表前面每列前面都有小圆点，想要隐藏这个圆点？

      Bootstrap里有作用于<ul>的list-unstyled类，可以隐藏这个圆点

               

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

<p>

<img src="../assets/case_1.jpg" alt="..." class="img-circle">

</p>

<h3>相关内容</h3>

<ul class="list-unstyled">

<li><a href="">深圳市四光年信息技术有限公司</a></li>

<li><a href="">深圳市腾讯计算机系统</a></li>

<li><a href="">北京市百度互联网计算有限公司</a></li>

<li><a href="">杭州市阿里巴巴集团</a></li>

</ul>

</div>

2、链接列表

次级导航区域实际上 是一些链接的列表 ，可以使用 Bootstrap 的 列表组 这个组件来制作，它用 <ul class="list-group"> 包裹住多个列表项（ <li class="list-group-item"> ）

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

<!--次级导航区域-->

<!--消息管理-->

<ul class="list-group">

<li class="list-group-item"><a href="">历史消息列表</a></li>

<li class="list-group-item"><a href="">群发消息</a></li>

<li class="list-group-item"><a href="">模板消息管理</a></li>

<li class="list-group-item"><a href="">客服聊天记录</a></li>

</ul>

</div>

#<form>样式

1、给<form>增加一个role属性，值为form，表示它是一个“表单”。

<form action="" role="form">

2、 checkbox 多选框、 radio 单选框和 <label> 一起用的时候，是不能直接添加一个 class="form-control" 类名的。

3、偏移的布局方式

      设置表单的 宽度为 6 份 ， 偏移 3 份 （表示 左边留出 3 份宽度的空白 ，那么右边通过自动计算剩下了 12-6-3 = 3 份单位宽度），可以让表单漂浮在页面的中间。尝试不同的数值分配，表单漂浮在                                     不同的区域

<div class="row">

<div class="col-md-6 col-md-offset-3">

<form>表单</form>

</div>

</div>

#导航样式

1、 希望导航条能够在往下拉动页面时一直固定在顶部不会消失，给它添加一个类navbar-fixed-top。

<nav class="navbar navbar-default navbar-fixed-top">

2、链接放在导航条右侧， 通过给 <ul class="nav navbar-nav> 添加一个类 navbar-right

</ul><!--导航条中的内容默认居左-->

<!--设置居右-->

<ul class="nav navbar-nav navbar-right">

<li><a href="#">admin</a></li>

<li><a href="#">退出</a></li>

</ul>

3、导航条上的下拉列表一部分被遮挡？

这是因为当导航条组件 <nav class="navbar navbar-default"> 添加了 固定在顶部 的类 navbar-fixed-top 后，其定位方式变成了 position: fixed 使得导航条后面的元素直接跑到原来导航条占据的空间去了，所以被导航条覆盖了一部分。

给整个导航条后面的元素添加一个样式，给它与顶部的距离增加一些的空白：

<div class="container" style="margin-top:80px">

#面板组件

1、 面板 组件是一个类似盒子的容器，可以把文本、图片等等都放在里面。它的 外部有一个边框 ，在上方和下方有一栏 标题 和一栏 脚注 （都是可选的）。

<!--面板-->

<div class="panel panel-default">

<div class="panel-heading">系统概况</div>

<div class="panel-body">

<p>操作系统：Ubuntu 14.04 x64, PHP版本：5.5.9, MySQL 版本：5.6</p>

<p>公众号总数：5</p>

<p>素材统计：图片(223) 视频(13) 图文素材(36)</p>

</div>

<div class="panel-footer">当前时间：2016-10-10 21:02</div>

</div>

#用“缩略图组件 ”来显示“挂件”

缩略图组件 实际上是一张 特殊样式的图片 和与它有关信息的组合（例如标题、按钮等）。在 Dashboard 页面中，有一个“快捷方式”区域，我们用缩略图组件来制作它们：

<!--缩略图-->

<h2>快捷方式</h2>

<div class="row">

<!--第一个缩略图组件-->

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

<div class="thumbnail">

<img src="../assets/dashboard-setting.png" style="height:150px;" alt="...">

<div class="caption">

<h3>公众号管理</h3>

<p>设置公众号的 AppID 和KEY 等</p>

<p>

<a href="#" class="btn btn-primary" role="button">进入</a>

<a href="#" class="btn btn-default" role="button">删除挂件</a>

</p>

</div>

</div>

</div>

<!--第二个缩略图组件 代码略-->

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

<div class="thumbnail">

#显示标签

标签组件专门用于显示一些简短的、描述性的文本，或者醒目的小提示 。

<div class="filte-user">

<span>只看标签</span>

<span class="label label-default">吃货</span>

<span class="label label-success">吃货</span>

<span class="label label-success">美女</span>

<span class="label label-default">白富美</span>

<span class="label label-default">爱玩</span>

<span class="label label-success">御姐</span>

</div>