bootstrap有哪些布局方式-创新互联

输出

在不同的浏览器窗口查看上面实例。

Bootstrap 流动布局

如果想要创建一个非固定的布局，即基于百分比的布局，以便让布局更灵活，请看这部分教程。

用法

解释

bootstrap.css（位于 bootstrap 的主文件夹的 docs\assets\css 下）的第 274 到 285 行，为创建主容器渲染样式，从而创建一个流动布局。流动布局的目的是为网页或 app 创建一个基于百分比的布局（比如，width=20%）。

Bootstrap 流动布局的实例

下面的代码创建一个网页流动布局。为了定制，除了默认样式，还需创建一个新的 css 文件 example-fluid-layout.css，与 bootstrap.css 位于同一个文件夹下。

CSS 代码

 body {        padding-top: 60px;        padding-bottom: 40px;      }      .nav li {      padding-top: 5px;      }            .sidebar-nav {        padding: 9px 0;      }      .leaderboard {  padding: 60px;  margin-bottom: 30px;  background-image: url('/twitter-bootstrap/images/gridbg.gif');  background-repeat:repeat;  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;}.leaderboard h2 {  font-size: 40px;  margin-bottom: 5px;  line-height: 1;  letter-spacing: -1px;  color:#FF6600;}.leaderboard p {  font-size: 18px;  font-weight: 200;  line-height: 27px;}.well {background-image: url('/twitter-bootstrap/images/gridbg.gif');  background-repeat:repeat;  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;}.nav .nav-header {font-size: 18px;color:#FF9900;}HTML 代码实例                                                                        
            
                                                                                                                                                
                    
                        
                            Home
                        
                            About
                        
                            Contact
                    
                    Logged in as                        username