Bootstrap学习心得

<meta name="viewport" content="width=device-width, initial-scale=1">

这句话是说明让当前的视图等于当前物理折别的大小
Bootstrap是移动设备优先的。
Bootstrap所有的js插件都依赖jquery
css文件放在head中js文件放在body的最下面
**

1

**按钮组：外面是一个div:class=btn-group

2

tooltip

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on left">Tooltip</button>

这里是bootstrap的一个提示组件data-toggle是这个组件名称，data-placement是提示的位置，title是提示的内容。

3

可以在bootstrap主页中定制属于自己的bootstrap。

4

导航条 navbar
导航条依赖javascript，响应式导航条依赖（collapse）组件。固定在顶部的导航条会遮盖住网页中的实际内容，解决的方法就是给body设置padding把内容从导航条下面挤出来。

5

在导航条中实现下拉菜单class:dropdown其中的具体的内容放在ul列表中这个列表的类dropdown-menu这样ul里面的li就成了一个下拉菜单的选取项。同时data-toggle添加到需要变成下拉菜单的元素中，如果没有data-toggle属性元素不会显示下拉菜单。

6

轮播内容的carousel
图片轮播设置样式首先设置最外层包裹的div在设置每一个轮转的div最后设置图片的宽度为100%，使图片自动缩放。
1) .carousel 2).carousel .item 3).carousel img

7

三栏布局的简单学习——依赖于bootstrap的删栏系统布局，设置div:class=container在里面设置div：class=row里面再设置三个div设置每隔div的类为col-md-4加起来是12，也就是一行的宽度。
注意：
行（row）必须包含在.container（固定宽度）或者.container-fluid(100%宽度中)
使用.col-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备中一开始是堆叠在一起的，在桌面（>970px）屏幕设备上变为水平排列。这样就实现了响应式页面设计。

8

标签页Tabs的——标签页时页面中经常用到的组件可以实现很多的内容节省空间。

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
    <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Home</div>
    <div class="tab-pane" id="profile">Profile</div>
    <div class="tab-pane" id="messages">Messages</div>
    <div class="tab-pane" id="settings">Settings</div>
</div>

9

页面底部的版权说明
很简单的一个页脚footer 设置pull-right类使他靠右显示

<footer>
    <p class="pull-right"><a href="#top">回到顶部</a>
    <p>商标</p>
</footer>

10

bootstrap弹出框（模态框）
一个完整的bootstrap弹出框分三部分modal-header、modal-body、modal-footer这三部分，弹出框最好要复制在body元素中，也就是作为body的子元素出现，这时为了防止其他元素的遮挡，默认是隐藏的，那么我们如何让其弹出呢？用data-toggle=”modal” data-target=”#about”这两个元素是控制id为about的弹出框弹出的。