bootstrap前端框架中有哪些布局方式-创新互联

这篇文章给大家分享的是有关bootstrap前端框架中有哪些布局方式的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联建站是一家以成都网站建设、网页设计、品牌设计、软件运维、营销推广、小程序App开发等移动开发为一体互联网公司。已累计为成都三维植被网等众行业中小客户提供优质的互联网建站和软件开发服务。

bootstrap有什么布局方式？

bootstrap有固定布局和流动布局：固定布局即创建基于固定像素数的网页或app；流动布局即创建一个非固定的布局，即基于百分比的布局，以便让布局更灵活。

Bootstrap 固定布局

如果您想要创建基于固定像素数的网页或 app，请看这部分的教程。

用法

<body>
  <div>
    ...
  </div>
</body>

解释

bootstrap.css（位于 bootstrap 的主文件夹的 docs\assets\css 下）的第 261 到 273 行，为创建主容器渲染样式，从而创建一个固定布局。固定布局的目的是为网页或 app 创建一个 940 像素（默认）宽的布局。

Bootstrap 固定布局的实例

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

CSS 代码

body {
padding-top: 60px;
padding-bottom: 40px;
}
.nav li {
padding-top: 5px;
}
.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;
}


HTML 代码
实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用Bootstrap 版本 2.0 固定布局的实例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example of Fixed Layout with Bootstrap version 2.0 from w3cschool.cc">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>
<body>
    <div class="navbar navbar-fixed-top">
        <div>
            <div>
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
                <a href="#">
                    <img src="/images/w3r.png" width="111" height="30" alt="w3cschool logo" /></a>
                <div>
                    <ul>
                        <li>
                            <a href="#">Home</a></li>
                        <li>
                            <a href="#about">About</a></li>
                        <li>
                            <a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse --></div>
        </div>
    </div>
    <div>
        <!-- Main hero unit for a primary marketing message or call to action -->
        <div>
            <h2>w3cschool Web Store</h2>
            <p>Try and purchase HTML5, JS, Ruby, PHP-MySQL based web apps to enhance your productivity at affordable price.</p>
            <p>
                <a class="btn btn-success btn-large">Sign Up for a 30 day free trial</a></p>
        </div>
        <!-- Example row of columns -->
        <div>
            <div>
                <h3>HTML5 and JS Apps</h3>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
                <p>
                    <a class="btn btn-success btn-large" href="#">View apps</a></p>
            </div>
            <div>
                <h3>Ruby Apps</h3>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
                <p>
                    <a class="btn btn-success btn-large" href="#">View apps</a></p>
            </div>
            <div>
                <h3>PHP MySQL Apps</h3>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                <p>
                    <a class="btn btn-success btn-large" href="#">View apps</a></p>
            </div>
        </div>
        <hr>
        <footer>
            <p>&copy; Company 2012</p>
        </footer>
    </div>
    <!-- /container -->
    <!-- Le javascript==================================================- ->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>

输出

bootstrap前端框架中有哪些布局方式

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

Bootstrap 流动布局

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

用法

<div>
  <div>
    <div>
      <!--Sidebar content-->
    </div>
    <div>
      <!--Body content-->
    </div>
  </div>
</div>

解释

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 代码
实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用Bootstrap 版本 2.0 固定布局的实例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example of Fluid Layout with Bootstrap version 2.0 from w3cschool.cc">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fluid-layout.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png"></head>
<body>
    <div class="navbar navbar-fixed-top">
        <div>
            <div>
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
                <a href="#">
                    <img src="/images/w3r.png" width="111" height="30" alt="w3cschool logo" /></a>
                <div>
                    <ul>
                        <li>
                            <a href="#">Home</a></li>
                        <li>
                            <a href="#about">About</a></li>
                        <li>
                            <a href="#contact">Contact</a></li>
                    </ul>
                    <p class="navbar-text pull-right">Logged in as
                        <a href="#">username</a></p>
                </div>
                <!--/.nav-collapse --></div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <div class="well sidebar-nav">
                    <ul class="nav nav-list">
                        <li>Frontend</li>
                        <li>
                            <a href="#">HTML 4.01</a></li>
                        <li>
                            <a href="#">HTML5</a></li>
                        <li>
                            <a href="#">CSS</a></li>
                        <li>
                            <a href="#">JavaScript</a></li>
                        <li>
                            <a href="#">Twitter Bootstrap</a></li>
                        <li>
                            <a href="#">Firebug</a></li>
                        <li>Backend</li>
                        <li>
                            <a href="#">PHP</a></li>
                        <li>
                            <a href="#">SQL</a></li>
                        <li>
                            <a href="#">MySQL</a></li>
                        <li>
                            <a href="#">PostgreSQL</a></li>
                        <li>
                            <a href="#">MongoDB</a></li>
                    </ul>
                </div><!--/.well -->
            </div><!--/span-->
            <div>
                <div>
                    <h2>Learn. Practice. Develop.</h2>
                    <p>w3cschool offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content.</p>
                    <p>
                        <a class="btn btn-success btn-large">Join w3cschool now</a></p>
                </div>
                <div>
                    <div>
                        <h3>Learn</h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
                        <p>
                            <a class="btn btn-success btn-large" href="#">Start Learning now</a></p>
                    </div><!--/span-->
                    <div>
                        <h3>Practice</h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
                        <p>
                            <a class="btn btn-success btn-large" href="#">Start percticing now</a></p>
                    </div>
                    <!--/span-->
                    <div>
                        <h3>Develop</h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
                        <p>
                            <a class="btn btn-success btn-large" href="#">Start developing now</a></p>
                    </div><!--/span-->
                </div><!--/row-->
                <hr>
                <footer>
                    <p>&copy; Company 2012</p>
                </footer>
            </div>
        </div>
    </div><!--/.fluid-container-->
    
    <!-- Le javascript==================================================- ->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
    <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>

输出

bootstrap前端框架中有哪些布局方式

感谢各位的阅读！关于bootstrap前端框架中有哪些布局方式就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页题目：bootstrap前端框架中有哪些布局方式-创新互联
网站链接：https://www.cdcxhl.com/article48/dgeohp.html

成都网站建设公司_创新互联，为您提供网站营销、App设计、定制网站、App开发、品牌网站制作、移动网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容