Bootstrap之Footer頁尾布局（2015年05月28日）

直接上頁尾部分的代碼：

<!--采用container-fluid，使得整個頁尾的寬度為100%，並設置它的背景色-->
<footer class="container-fluid foot-wrap">
    <!--采用container，使得頁尾內容居中 -->
        <div class="container">
            <div class="row">
                <div class="row-content col-lg-2 col-sm-4 col-xs-6">
                    <h3>Subscribe</h3>
                    <ul>
                        <li><a href="#">Newsletter</a></li>
                        <li><a href="#">RSS feed</a></li>
                        <li><a href="#">RSS to Email</a></li>
                        <li><a href="#">Product Hunt</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Pinterest</a></li>
                        <li><a href="#">Google+</a></li>
                    </ul>
                </div>
                <div class="row-content col-lg-2 col-sm-4 col-xs-6">
                    <h3>BROWSE</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Templates</a></li>
                        <li><a href="#">Resources</a></li>
                        <li><a href="#">OPL Themes</a></li>
                    </ul>
                </div>
                <div class="row-content col-lg-2 col-sm-4 col-xs-6">
                    <h3>INFORMATION</h3>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Why One Page?</a></li>
                        <li><a href="#">OPL Blog</a></li>
                        <li><a href="#">Product Hunt</a></li>
                        <li><a href="#">Advertise</a></li>
                        <li><a href="#">Submit</a></li>
                        <li><a href="#">Award Ribbons</a></li>
                        <li><a href="#">Roadmap</a></li>
                    </ul>
                </div>

                <div class="row-content col-lg-2 col-sm-4 col-xs-6">
                    <h3>RESOURCES</h3>
                    <ul>
                        <li><a href="#">Browse All</a></li>
                        <li><a href="#">Design</a></li>
                        <li><a href="#">Development</a></li>
                        <li><a href="#">Hosting</a></li>
                        <li><a href="#">Round Ups</a></li>
                        <li><a href="#">Tutorials</a></li>
                    </ul>

                </div>
                <div class="row-content col-lg-2 col-sm-4 col-xs-6">
                    <h3>TRENDING</h3>
                    <ul>
                        <li><a href="#">Big Typography</a></li>
                        <li><a href="#">Free Templates</a></li>
                        <li><a href="#">Most Loved</a></li>
                        <li><a href="#">Centrally Divided</a></li>
                        <li><a href="#">Skrollr.js</a></li>
                        <li><a href="#">Parallax Scrolling</a></li>
                        <li><a href="#">Off-Canvas Menu</a></li>
                        <li><a href="#">Molecules</a></li>
                    </ul>
                </div>
                <div class="row-content col-lg-2 col-sm-4 col-xs-6">
                    <h3>OPL THEMES</h3>
                    <ul>
                        <li><a href="#">Browse All</a></li>
                        <li><a href="#">East Java</a></li>
                        <li><a href="#">Clutterless</a></li>
                        <li><a href="#">Mapped</a></li>
                    </ul>
                </div>

            </div><!--/.row -->
        </div><!--/.container-->

        <!-- 社交圖標列表，其中圖標采用的是Font Awesome圖標字體庫-->
        <ul class="social">
            <li>
                <a href="#" title="Twitter Profile">
                    <span class="icon fa fa-twitter"></span>
                </a>
            </li>
            <li>
                <a href="#" title="Facebook Page">
                    <span class="icon fa fa-facebook"></span>
                </a>
            </li>
            <li>
                <a href="#" title="LinkedIn Profile">
                    <span class="icon fa fa-linkedin"></span>
                </a>
            </li>
            <li>
                <a href="#" title="Goole+ Profile">
                    <span class="icon fa fa-google"></span>
                </a>
            </li>
            <li>
                <a href="#" title="Github Profile">
                    <span class="icon fa fa-github"></span>
                </a>
            </li>
        </ul>
        <p align="center" style="margin-top: 20px;color:#878B91;">
            Copyright &copy;2015 Dreyer
        </p>

</footer>

部分樣式是用less寫的，同樣帖上來

.foot-wrap{

	background-color: #373f48;

	margin-top:80px;

}

 .row-content{

 >h3{

		color:#DDD;

		font-size:16px;

		font-weight: 300;

		line-height: 16px;

		margin:40px 0 30px 34px;

     }

>ul{

	font-size:13px;

	line-height:24px;

	>li{

		list-style:none;

		>a{

		color:#878B91;

		&:hover{

		text-decoration:none;

		color:#c1ba62;

		}

		}

	}	

	}

 } 

 ul.social{

margin:0;

padding:0;

width:100%;

text-align:center;

> li{

	display:inline-block;

	> a{

		display:inline-block;

		font-size:18px;

		line-height:30px;

		.square(30px);

		border-radius:36px;

		background-color:@gray-light;

		color:#fff;

		margin:0 3px 3px 0;

		&:hover{

		text-decoration:none;

		background-color:@link-hover-color;

		}

		}

	}

}

最后的效果是這樣的

大屏顯示：

中屏顯示：

小屏顯示：

備注：由於有直接修改過bootstrap的源文件樣式，所以復制以上代碼后，沒有達到如圖所示的效果可屬於正常現象。