BootStrap应用实例学习笔记

第二次学习bootstrap了，这次主要以实际用例为主，做一下总结。

51CTO课程链接:BootStrap零基础学习实战视频课程

Bootstrap官方文档

1. 登陆表单

在bootstrap中，大量使用div标签控制层级关系，使用class属性控制样式表现。

/>
<div class="caption">
<h4>图片1h4>
<p>美丽的风景p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/green.png" />
<div class="caption">
<h4>图片2h4>
<p>美丽的风景p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/green.png" />
<div class="caption">
<h4>图片3h4>
<p>美丽的风景p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/green.png" />
<div class="caption">
<h4>图片4h4>
<p>美丽的风景p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/green.png" />
<div class="caption">
<h4>图片5h4>
<p>美丽的风景p>
div>
div>
div>
div>
div>

6. 面包屑导航条

面包屑导航的作用就是告诉访问者他们目前在网站中的位置以及如何返回，在bootstrap中制作导航条非常简单。

<div class="col-md-12">
    <ul class="breadcrumb">
        <li><a href="#">网站首页a>li>
        <li><a href="#">图片a>li>
        <li><a href="#" class="text-muted">所有图片a>li>
    ul>
div>

7. Tab标签

<div class="row">
    <div class="col-md-6">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#page1" data-toggle="tab">页面1a>li>
            <li><a href="#page2" data-toggle="tab">页面2a>li>
            <li><a href="#page3" data-toggle="tab">页面3a>li>
        ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="page1">
                <p>p>
                <p>生活，没有什么大道理可言，过日子，就是一种心情. p>
                <p>或许，倾心已久的人就在你举目可见的地方，却不一定是在等你； p>
                <p>或许，付出努力和艰苦后，你的钞票并不会乖乖地躲进你的腰包里； p>
                <p>或许，积年累月地寻找着突破事业的窗口，现实却并不成全你； p>
                <p>或许，…… p>
            div>
            <div class="tab-pane fade" id="page2">
                <p>p>
                <p>生活，没有什么大道理可言，过日子，就是一种心情. p>
                <p>或许，倾心已久的人就在你举目可见的地方，却不一定是在等你； p>
                <p>或许，付出努力和艰苦后，你的钞票并不会乖乖地躲进你的腰包里； p>
                <p>或许，积年累月地寻找着突破事业的窗口，现实却并不成全你； p>
            div>
            <div class="tab-pane fade" id="page3">
                <p>p>
                <p>生活，没有什么大道理可言，过日子，就是一种心情. p>
                <p>或许，倾心已久的人就在你举目可见的地方，却不一定是在等你； p>
                <p>或许，付出努力和艰苦后，你的钞票并不会乖乖地躲进你的腰包里； p>
            div>
        div>
    div>
div>