关于Bootstrap在前端开发过程中的整理和总结

我觉得有了bootstrap之后，网站和平台前端开发省事好多。至少自适应的网站排版效率高些。

栅格系统：

bootstrap的栅格系统主要核心功能是来实现手机端、平板、笔记本电脑、台式电脑之类显示的自适应。其中：

col-xs：手机端

col-sm：平板

col-md：笔记本电脑

col-lg：台式电脑

其主要规则是：

1、一个.row应该包含在一个.container当中，才能因为内外边距的正负抵消而有合适的对齐。

2、在.row当中创建一组.column形成水平方向上的容器。

3、具体内容应该放在.column中，而且只有.column可以作为.row的直接子元素。
原文链接：https://blog.csdn.net/jnshu_it/article/details/81042180

 

核心内容：

1、栅格系统：实现内容区块响应（也就是随着页面的放大和缩小，显示的内容大小自适应调整）；

2、让页面适配不同的设备（手机、平板、电脑）；

这里举个代码例子：

<div class="row text-center" style="line-height: 40px;background-color: deepskyblue;color: white;">
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">1</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">2</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">3</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">4</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">5</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">6</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">7</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">8</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">9</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">10</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">11</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="border:2px solid white;">12</div>
</div>	

3、响应式导航、实现头部响应；

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Bootstrap</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

4、响应式图片、视频等；

 

有新的内容再进行更新

有几个问题：

1、究竟是用于生产环境的 Bootstrap好，还是使用 BootCDN 提供的免费 CDN 加速服务；

2、bootstrap源码是如何进行编译的，需要什么工具？

 

待续