博客bootstrap代码（bootstrap 代码）

本篇文章给大家谈谈博客bootstrap代码，以及bootstrap 代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、个人博客如何用bootstrsop写后台源码
• 2、bootstrap使用方法
• 3、bootstrap 为什么是940px
• 4、如何利用 Bootstrap 写一个简单的个人博客

个人博客如何用bootstrsop写后台源码

到bootstrap官方网站下载，对于我们开发者来说，直接下载编译和压缩后的CSS、JavaScript文件，另外还包含字体文件，但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。这是最基本的Bootstrap组织形式：未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。

bootstrap使用方法

面板样式是在很多种情况下都可能会使用到的样式之一，例如博客的侧边栏、企业网站的公告栏、栏目列表等。

面板样式除了内容之外，还有一个面板头部可以添加标题，让我们通过这篇文章看看Bootstrap面板样式的使用方法。

Bootstrap面板基本样式

直接调用面板样式也非常容易，只需要通过以下代码即可实现：

div class="panel panel-default" div class="panel-body" Basic panel example /div /div

该样式仅仅包含了面板样式的内容部分，而没有加入头部，适用于不需要头部的面板内容。

Bootstrap面板带标题样式

上面提到的面板样式是没有带标题的，在一些情况下不够用，所以Bootstrap面板还提供了带有标题的面板样式，让我们看看应该怎么去使用：

div class="panel panel-default" div class="panel-heading" h3 class="panel-title"面板标题/h3 /div div class="panel-body" 面板内容 /div /div

上面这一部分代码是最为标准的带有标题的面板结构，为了适应阅读设备以及SEO搜索引擎优化元素，最好将标题放入h1-h5的标签中。

Bootstrap面板带注脚样式

如果一些解释说明类的文字无法在面板标题很好地表现出来，可以通过注脚的形式来进行说明，Bootstrap面板同样提供了注脚这个样式：

div class="panel panel-default" div class="panel-body" 面板内容 /div div class="panel-footer"面板注脚/div /div

通过主次关系来进行标题或者是注脚的选择，是用好面板组件的关键。

Bootstrap面板有意义的样式

和其他Bootstrap组件一样，Bootstrap面板样式同样具有有意义的样式，通过引用这几个样式可以将该面板的作用直观展现出来，同样也是那几种颜色和样式名称：

div class="panel panel-primary"主要面板样式/div div class="panel panel-success"成功面板样式/div div class="panel panel-info"信息面板样式/div div class="panel panel-warning"警告面板样式/div div class="panel panel-danger"危险面板样式/div

Bootstrap面板与表格结合

如果你需要在面板中引入表格样式，那么也可以很方便地实现：

div class="panel panel-default" div class="panel-heading"面板标题/div table class="table" 表格内容 /table /div

Bootstrap面板与列表结合

就像开头所说的一样，如果你想要在面板中引入列表，那也真是再合适不过了，通过以下代码便可轻松实现：

div class="panel panel-default" div class="panel-heading"面板标题/div div class="panel-body" p面板内容简介/p /div ul class="list-group" li class="list-group-item"列表项目1/li li class="list-group-item"列表项目2/li li class="list-group-item"列表项目3/li li class="list-group-item"列表项目4/li li class="list-group-item"列表项目5/li /ul /div

bootstrap 为什么是940px

　[Bootstrap]() 是由两个 twitter 员工开发并开源的前端框架，目前已经到了 2.0.4 的版本，在 [Github]() 上面有 32517个 watch，和 6608个 fork。非常火爆，而如此火爆自然有它的道理，在我们团队的所有项目中正全面推行使用 Bootstrap，我想根据自己的实际使用体验来说明一下为什么要用 Bootsrap。

## twitter 出品

首先，Bootstrap 出自 twitter，大厂出品，并且开源，自然久经考验，减少了测试的工作量。站在巨人的肩膀上，不重复造轮子。

同时，Bootstrap 的代码有着非常良好的代码规范，从中也可以学习到很多，在 Bootstrap 的基础之上创建项目，日后代码的维护也变得异常简单清晰。

## 基于 Less、丰富的 Mixin

如果你不知道 [Sass]() 或者 [Less]() 这样的 CSS 预处理技术，我只能说你实在太落伍了，建议你先去了解之。

Bootstrap 的一大优势就是它是基于 Less 打造的，并且也有 [Sass版本]() 。正因为如此，它一推出就包含了一个非常实用的 Mixin 库任你调用。

举个很简单的例子，当你平时要用到一些 css3 属性的时候，你要写不同的浏览器写不同的 -prefix-，比如圆角 border-radius ：

-webkit-border-radius: 10px;

-moz-border-radius:10px;

-border-radius:10px;

但是通过 Bootstrap 给你预设好的 mixin，你直接写成这样就可以了：

@include border-radius (10px);

是不是轻松愉快？基本常用的 CSS3 mixin 都帮你整理好了，你都直接调用就可以了，在此不一一举例。 Bootstrap 是目前最好的基于 Less(Sass) 的前端框架，丰富而实用的 Mixin 应该是其最好的地方。

## 可以 Responsive 的栅格系统

Bootstrap 的 [栅格 (Grid)]() 系统也很先进，整个 Grid 系统是可以 Responsive 的！如果你还不知道 [Responsive Design]()，那么你太落伍了，建议你了解之。

Bootstrap 已经帮你搭好了实现 Responsive Design 的基础框架，并且非常容易修改。如果你是一个新手，Bootstrap 可以帮助你在非常短的时间内上手 Responsive Design。

## 丰富的组件

Bootstrap 的[HTML组件]() 和 [Js组件]() 非常丰富，并且代码简洁，非常易于修改，你完全可以在其基础之上修改成自己想要的任何样子。这是工作效率的极大提升。

## 插件

另外、由于 Bootstrap 的火爆，又出现了不少围绕 Bootstrap 而开发的插件。其中最实用的莫过于 [Font Awesome]() 了。它是一套 icon font，提供了丰富的 icon 给你选择，新的 2.0 版又根据网友的意见增加了70个新的 icon。

在现在一股有 Apple 带领的 Retina 潮流下，对图片的视网膜屏下的解决方案已经变得越来越有必要了，而在 icon 这个东西上，icon font 是完美的解决方案，不用担心分辨率的问题，因为它实际上是字体。

## 以上

这些就是为什么要用 Bootstrap 的原因，目前市面上没有任何其他框架可以和它相媲美，但是它就虽然是一匹好马，你还是需要花费一些时间去学习它、适应它，它在日后给你带来的便利性是无可比拟的，你会后悔自己为什么没有早点接触它。

### 一些题外话

#### 我不喜欢用框架，我喜欢原生的写法

这是我在给别人推荐 Bootstrap 的时候最常听到的话，我只能说，Bootstrap 并不能帮你完成所有事情，它只是一个的框架，在这个框架上面你依旧可以任意的发挥，并且发挥得更好，但是前提是你要驾驭得了它。

如果你不够熟悉它，你确实是有时候会被它有所牵绊，但是你熟悉了之后发现了其实它没有对你进行任何限制，这需要一个过程。

#### 是给无设计师的团队或者程序员用的

对此我真的是无力吐槽，Bootstrap 的开发者就在他的博客上抱怨过，为什么出来那么一堆完全照搬 Bootstrap 样式的网站。

记住、完全用 Bootstrap 的样式只会让人心生厌烦。

如何利用 Bootstrap 写一个简单的个人博客

说明一下：Bootstrap是Twitter推出的一个用于前端开发的开源工具包，只是一个CSS/HTML框架。 建立个人博客，我相信你也知道需要一个程序后台，如wordpress，dede，zblog等等这些建站程序。 Bootstrap更多的是用来在它基础上开发一个主题，如wordpress的主题，dede的主题，zblog的主题等等都可以。

博客bootstrap代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于bootstrap 代码、博客bootstrap代码的信息别忘了在本站进行查找喔。