&&&&& 由于项目需要，所以打算好好学习下bootstrap框架，之前了解一点，框架总体不难，但涉及到的东西还是很多，想要熟练掌握它，还是要多练练。
一：bootstrap是什么？
&&&&&& bs是什么?& 即前端页面搭建的标准化框架工具，已经写好了css.js样式，只需要拿来用即可。
& & && 怎么用bs呢？主要是通过使用不同的类增加效果，每一种类，对应的功能不同。
&&&& & bs好处：增加了开发效率，页面设计更加美观,支持响应式开发。下载地址：
&&&& 学习文档：
二：css样式设计
&&&& 1：基于Html文档
&&&&&&&&& bootstrap引用了部分html元素，所以头部需写成下面所示的样列。
&!DOCTYPE html&
---包含HTML5文档声明，所有浏览器均开启标准模式&html&&head&&meta charset="utf-8"&&meta http-equiv="X-UA-Compatible" content="IE=edge"&&meta name="viewport" content="width=device-width, initial-scale=1"&&&& &!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！确保支持响应式布局 --&&title&Bootstrap&/title&
&!-- 新 Bootstrap 核心 CSS 文件 --&
&link rel="stylesheet" href="///bootstrap/3.3.5/css/bootstrap.min.css"&
&!-- 可选的Bootstrap主题文件（一般不用引入） --&
&link rel="stylesheet" href="///bootstrap/3.3.5/css/bootstrap-theme.min.css"&
&!-- jQuery文件。务必在bootstrap.min.js 之前引入 --&
&script src="///jquery/1.11.3/jquery.min.js"&&/script&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src="///bootstrap/3.3.5/js/bootstrap.min.js"&&/script&&/head&&body&&h1&Hello, world!&/h1&&/body&&/html&
2：栅格系统布局
&通过设置行和列来进行内容的布局。bootstrap把页面设置为12列。通过改变列的数字来进行布局，比如设置三个等宽的列：
&!DOCTYPE html&
&html lang="zh-CN"&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --&
&title&&/title&
&link href="css/bootstrap.css" rel="stylesheet"&
&link href="css/bootstrap.min.css" rel="stylesheet"&
&script src="/jquery/1.11.2/jquery.min.js"&&/script&
&script src="/bootstrap/3.3.4/js/bootstrap.min.js"&&/script&
设置栅栏式布局--&
class="container"&&!--或者container-fluid--&
class="row"&
-- col-xs-4 : 指小于768px的小设备
class="col-xs-4"&11&/div&
-- col-sm-4 ：指&=768px的设备
class="col-xs-4"&22&/div&
-- col-md-4 ：指&=992px设备
class="col-xs-4"&33&/div&
-- col-lg-4 ：值1200px设备
& &div& class="row"&&&&&&&&&&&&&&&&&&&&& &div& class="col-md-4"&11&/div&&&&&&&&&&&&&&&&&&&&& &div& class="col-md-4"&22&/div&&&&&&&&&&&&&&&&&&&&& &div& class="col-md-4"&33&/div&&&&&&&&& &/div&&&&&&&&&&& &div& class="row"&&&&&&&&&&&&&&&&&&&&& &div& class="col-sm-4"&11&/div&&&&&&&&&&&&&&&&&&&&& &div& class="col-sm-4"&22&/div&&&&&&&&&&&&&&&&&&&&& &div& class="col-sm-4"&33&/div&&&&&&&&& &/div&&&&&&&&&&& &div& class="row"&&&&&&&&&&&&&&&&&&&&& &div& class="col-lg-4"&11&/div&&&&&&&&&&&&&&&&&&&&& &div& class="col-lg-4"&22&/div&&&&&&&&&&&&&&&&&&&&& &div& class="col-lg-4"&33&/div&&&&&&&&& &/div&
&css网格式有四种写法，主要应用于不同设备的分辨率。
&2：平移列
&&&& 使用offset来进行平移。即平移的列数
class="container"&&!--或者container-fluid--&
class="row"&
class="col-xs-4"&11&/div&
class="col-xs-4"&22&/div&
class="col-xs-offset-2
col-xs-4"&33&/div&---指33向右平移了两列
class="row"&
class="col-md-4"&11&/div&
class="col-md-4
col-md-offset-2"&22&/div&
class="col-md-4"&33&/div&
&div class="row"&
&div class="col-md-4"&11&/div&
&div class="col-md-4 col-md-offset-2"&22&/div&
&div class="col-md-4"&33&/div&
&!-- 平移列--&
效果如下：
&33由于平移了两列，不能满足它占4列的要求，于是被挤到下一行开始占据4列。简单来说，相当于将整个div块右移。
&3：嵌套列
& 即在网格列里面再嵌套列。我们对比来看。
class="container"&&!--或者container-fluid--&
class="row"&
class="col-xs-8"&
class="col-xs-2"&11&/div&
class="col-xs-4"&22&/div&
class="col-xs-2"&33&/div&
class="row"&
class="col-xs-8"&11&/div&
class="row"&
class="col-xs-4"&11&/div&
class="col-xs-4"&22&/div&
class="col-xs-4"&33&/div&
效果如下：
有没有发现问题？为什么上面的没有平均分配8？原因：我们来看下调试控制台
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
发现padding-left 和padding-right均为15px,这是因为，列与列之间存在padding值得影响，那为什么第二个div没有影响呢？我们来探究一下栅栏格的原理。1：&行（row）&必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。2：通过为&列（column）&设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding也就间接为&行（row）&所包含的&列（column）&抵消掉了padding。注意：此时row已经把列的padding给抵消了，所以，没有出现padding的值情况。4：列排序
主要是使用col-xs-push-*
col-xs-pull-*(*表示0-11的数字)如何理解这两个类呢？push表示推，pull表示拉。
&div class="row"&
&div class="col-xs-4"&21&/div&
&div class="col-xs-8"&24&/div&
&div class="row"&
&div class="col-xs-4
col-xs-push-8"&21&/div&
&div class="col-xs-4
col-xs-pull-4"&24&/div&
效果图如下：
&div class="col-xs-4& col-xs-push-8"&21&/div&---记为div1 &div class="col-xs-8& col-xs-pull-4"&24&/div&---记为div2
即可理解为交换两者位置，需要将div1向右推8列，div2需要向左拉4列。三：流式网格布局
1：列宽使用百分比，而不是像素
2：将row类换成row-fluid
3:其它基本功能与上面的固定布局一样，支持响应式。
4：平分某一个列时，由于流式布局采用的是百分比，所以应该按照6来计算。
//注意下面这种情况，平分8列时，并不是设置它为两个4，而是两个6，因为bootstrap中是12列栅格分布。
&div class="row"&
&div class="col-xs-8"&
&div class="col-xs-6"&2&/div&
&div class="col-xs-6"&2&/div&
下面来看一下流式布局的应用,对比固定布局来看。
&!-- 流式布局--&
class="container"&
class="col-xs-6"&333&/div&
class="col-xs-6"&444&/div&
class="container-fluid"&
---声明container-fluid类，表明内容是流式布局，作用：作为一个包含块，来包含流式内容
class="row-fluid"&
class="col-xs-6
col-md-12"&333&/div&
class="col-xs-6
col-md-12"&444&/div&
class="row-fluid"&
----没用声明container和container-fluid类，此时为屏幕的宽度
class="col-xs-6"&333&/div&
class="col-xs-6"&444&/div&
当屏幕小于768px时，效果如下：
当屏幕大于992px时，效果如下：此时独占一行
&row-fluid类（非常重要），决定是否是流布局。然后里面的内容块代码编写与网格系统一致，依然是从col-md-1到col-md-12，分别对应于不同的百分比.
四：响应式设计简单来说就是支持不同设备（手机，PC）的分辨率(960PX,1366PX,978PX等等)进行自适应响应。
&div class="row"&
&div class="col-xs-6
col-md-12"&21&/div&
&div class="col-xs-6
col-md-12"&24&/div&
当设备小于768px时，效果如下：
当设备&=992px时。效果如下：
上面两种类，分别表示的分辨率不一样。col-md-12此时表示每列独占一行即12列。
&作者：向婷风
&如果您觉得阅读本文对您有帮助，请点一下&推荐&按钮，您的&推荐&将是我最大的写作动力！欢迎各位转载，但是未经作者
本人同意&转载文章之后必须在 文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。
阅读(...) 评论()CSS 速查手册 - 网页陶吧
此网页使用了框架，但您的浏览器不支持框架。您的位置： &
Web设计中CSS层叠样式表的应用研究
优质期刊推荐css样式套用每个文档 在OFFICE2007表格中怎样的相关知识
“css样式套用每个文档 在OFFICE2007表格中怎样”的相关知识
根据网友提出的“css样式套用每个文档 在OFFICE2007表格中怎样”等问题，Excel办公网整理了各大知名网站有关“css样式套用每个文档 在OFFICE2007表格中怎样”的一些信息，请注意，文中的内容并非本站的观点，不要相信任何联系方式。下文是关于“css样式套用每个文档 在OFFICE2007表格中怎样”的一些基本知识：
问题：在OFFICE2007表格中怎样把我自己的文档样式套用进去回答：另存为“excel模板（*.xltx）”或者“Excel启用宏的模板（*.xltm）”，下次新建文档时，打开模板就可以了... 问题：9大理由告诉你为什么应该学习HTML跟CSS
回答：...容、标题、连结、图片等，让浏览器知道网站整个架构的呈现。
CSS （Cascading Style Sheets）层叠样式表，是一种能为网页增添样式的电脑语言。换句话说，它就是能为你的网站修改字体样式、颜色、网页背景、甚至是华丽的动画与 3D 效果、让你增添设计感的工具。
很简单，对吧？但你可能还在怀疑，这到底能为你的工作带来什么？底下就告诉你几行简单的程式语言能让你有什...
问题：Word2003限制文档的格式设置
回答：...osoft Word在某些功能中使用的样式，例如目录以及项目符号或编号列表。
-若希望保留部分自动套用格式功能，例如将&1/2&更改为&½&，请选中&允许自动套用格式替代格式设置限制&复选框。
5、单击&是，启动强制保护&。
6、在&新密码(可选)&框中键入密码，然后确认该密码。
问题：Excel2007套用现成表格样式gif动画演示教程
回答： Excel2007及以上版本提供了许多漂亮的预定义表格样式，我们可以为数据表轻松快速地套用格式。如果预定义的表样式不能满足需要，还可以创建并应用自定义的表格样式。
应用表格样式方法如下。
①在工作表中选择需要设置样式的单元格。
②在&开始&选项卡上的&样式&组中，单击&套用表格式&。
③在弹出的样式列表中选择需要的表格样式。
问题：关闭自动设置格式功能后，Word2003仍在为文档设置
回答：...;菜单上的&自动更正选项&可以关闭两种类型的自动格式设置功能：
-&键入时自动套用格式&选项卡包含键入时 Microsoft Word 进行哪些自动更正。
-&自动套用格式&选项卡包含您通过单独的操作设置文档格式时，Word 进行哪些自动更正。
如果上述两种类型都与您遇到的问题无关，请尝试下列解决方法之一：
不需要的符号重复出现
-如果已清除&键...
问题：Excel2010视频教程：18、快速计算表格中的数据
回答：...格当中的数据进行计算汇总的时候，除了通过手工输入公式来进行计算之外，我们还可以通过套用表格样式来快速完成，我们大家一起来操作一下，首先我们将鼠标定位到表格的任意单元格当中，然后再开始选项卡的样式选项组当中单击套用表格样式按钮，再随即打开的表格格式样式库当中选择一种样式，然后我们来修改一下表数据的来源，表数据来源修改完成之后，应用我...
问题：巧妙套用Excel2007表格样式进行数据汇总
回答：...行数据汇总。
①首先，打开要进行处理的Excel表格，选中数据区域，单击菜单栏--开始--样式--套用表格样式。
②从弹出的菜单中选择中等深浅里面第二行第二个样式。
③弹出套用表格对话框，我们直接确定即可。
④勾选设计选项卡中的汇总行，这样表格下方就能看到汇总行了，便于之后的计算处理。
⑤单击下拉箭头，选择求和。
⑥求和汇总结束之后，点击工具...
问题：Excel2007中解决套用表格样式之后不能合并的问题
回答：表格样式可以快速使用，免去了我们重新设置样式所耽误的时间。有时候套用了表格样式之后，发现&合并后居中&功能用不了了。案例阐述了如何解决套用表格样式之后不能合并居中的问题。 下面，大家可以根据我的步骤来学习。
①启动Excel2007，打开一份电子表格，当我们选中B2：B3区域的时候，发现上面功能菜单中的合并居中按钮为灰色，不可使用。
②如何将其...
问题：如何让Word中的表格自动套用格式
回答：...改色彩，比如给表格字体、表格边框线、底纹等格式更改，下面让我们一起看看给Word表格自动套用格式的操作方法吧！
Word中的表格自动套用格式操作：
①首先，将光标移动到表格中，然后单击菜单栏的&表格&，然后选择&表格自动套用格式&命令；
②在弹出的&表格自动套用格式&对话框中的&类别&里面找到&所有表格样式&，然后...
问题：为什么EXCEL的套用表格格式的样式不见了
回答：是不是安装不完全。你重新安装一次，用全部安装。
问题：10个强大的纯CSS3动画案例分享
回答： 我们的网页外观主要由 CSS 控制，编写 CSS 代码可以任意改变我们的网页布局以及网页内容的样式。CSS3 的出现，更是可以让网页增添了不少动画元素，让我们的网页变得更加生动有趣，并且更易于交互。本文分享了 10 个非常炫酷的 CSS3 动画案例，希望大家喜欢。
1、纯 CSS3 实现烧烤动画
这个 CSS3 动画相当有创意，动画中所有的烧烤元素都是利用 CSS3 绘制而成，冒出的烟雾也...
问题：dw中插入表格中文字换颜色怎么换
回答：你好我来回答你的问题更换文字的颜色 你可以使用 CSS样式1、选中要更换颜色的文字 在“属性”面板“目标规则”选项的下拉列表中选择“新内联样式”选项 ，然后 单击颜色 按钮 在弹出的 颜色值对话框中选择需要的颜色即可2、打开 CSS面板 新建一个 类 样式 在弹出的对话框中 设置 颜色 单击确定按钮 完成样式的创建，选中要跟换颜色的文字 在属性面板 类选项的下拉列表...
问题：Word2003如何检测语言
回答：...言（即活动模板（模板：是指一个或多个文件，其中所包含的结构和工具构成了已完成文件的样式和页面布局等元素。例如，Word 模板能够生成单个文档，而 FrontPage 模板可以形成整个网站。）中用于&正文&样式 （&正文&样式：文档中使用的基于 Normal 模板 (Normal.dot) 的默认段落样式。）的语言格式）。
-活动键盘（在安装了多种键盘语言 （键盘语言：所选的...
问题：如何在Word2007下设置表格
回答：...样一个现象，编辑完文稿之后，左侧的样式中莫名其妙呈现许多项目：&&&&自动套用样式& 这就是用户在修改名目时遇见需要的就直接在在东西中修改，Word每次城市把它看成一个新样式来看待的功效。这在结果上固然没什么，可是一旦文稿作修改，事情量便相当大。我们必然要利用样式来文稿名目。 其实办理这个问题最简朴的是－全部排除，从头配置。做法...
问题：Word2010视频教程：11、为文档套用稿纸格式
为您推荐：Powered by