bootstrap到底用做什么 如何bootstrap有什么下拉菜单样式

bootstrap到底用做什么

只要您具备HTML和CSS的基础知识，您就可以开始学习 Bootstrap。
学习Bootstrap：bootstrap环境搭建
1、首先你确定要保证你所需要的引用你都有, 还要保证运行的最小点. 需要3个外部文件, A, B, C,  如果是你找到的一段代码, 要确保能够运行,  一般情况下, 一个框架都会给你一个最基本的例子,  bootstrap也给出了一个简单的例子.  全部放在上面, 然后把js. 都放在页面的最下面, 这样能够更好的加载页面渲染. 建议你使用最基本的页面去修改你需要的页面, 而且要做到按照自己的需求来写代码. 不要复制, 粘贴。

2、Bootstrap中内置了一套响应式的, 移动优先的流式栅格系统, 随着不同的设备, 不同的平台. 或者窗口大小(viewport), 根据他们的不同系统会自动的分成12份. 也就是说, 栅格系统是通过一系列的行和列来组成我们需要的页面, 然后把你需要的内容放在这些的布局中。

3、在table上, 填写一个class为.table的样式即可生成一个很好很实用的表格. 其实, 这些都是别人提前建立好的页面显示效果, 就是不用自己再去写一些简单的css效果. 多练. 多使用它就属于你。

如何bootstrap有什么下拉菜单样式

class=btn-group，这样就可以声明这是一个按钮组，一个分组的按钮，bootstrap会把第一个按钮、最好一个按钮圆角效果处理好，看起来会更美观。
，这个就是上图的三角形图标元素。

贴出全部代码：

使用bootstrap实现一个简单页面效果

前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来实现Bootstrap简单布局的制作。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。如图所示：
Bootstrap实现简单布局实例

第二步，在顶部head标签里e5a48de588b6e79fa5e9819331333431373231引入外部JQuery和Bootstrap库文件。下载好相关的库文件后，放在相应的文件夹里。我们将JS文件放在Body标签底部。注意要引入jQuery库，因为Bootstrap框架是以jQuery库文件为基础的。并且要放在的Bootstrap库文件上面，不然不会有效果。如图所示：
Bootstrap实现简单布局实例

第三步，在Body中写简单的html代码。在一个容器div中，加一个标题和一段说明文字，随便输入一些文字。然后加一个子div，里面又并列三个子div，div里面也同样加一个标题和一段说明文字。在浏览器中查看初始化效果，如图，代码如图所示：
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例

第四步，添加相应的class类。我们知道，Bootstrap作为一个封装的前端框架，已经为我们做好了相关的样式，我们只需要在标签里加上相关的class类即可实现样式了。我们为父div添加名为“container”的类，为标题添加名为“page-header”的类，在浏览器中查看效果，我们发现容器居中了。效果如图所示：
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例

第五步，在包围三个字div的的div中添加一个名为“row”的类，该类可以将三个div放在同一行并排显示，而不是像之前那样，三个div各占一行。如图所示：

Bootstrap实现简单布局实例

第六步，在三个子div中，添加名为“col-xs-4 col-sm-4 col-md-4 col-lg-4”的类，这四个类分别适用于手机、平板电脑、中型电脑、大型电脑的，即可实现自适应布局。如图所示：
Bootstrap实现简单布局实例

最后，在浏览器中查看效果，可以看到，三个区块由原来的各自独占一行到现在的三个并排一行，缩小浏览器分辨率大小，也可以实现自适应布局了。是不是很强大呢？读者可以自行实践。效果如图所示：

附：本经验关键词：bootstrap如何实现布局、bootstrap怎么布局、bootstrap怎么使用布局、bootstrap学习布局、bootstrap布局教程、bootstrap使用布局、bootstrap网格布局、bootstrap的布局方法、bootstrap布局

更多相关“bootstrap”经验请点击下面的“经验引用”。

15Bootstrap实现流动布局实例

16Bootstrap实现嵌套布局

35如何用Bootstrap制作轮播图
Bootstrap实现简单布局实例

如何用bootstrap解决分辨率

Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。
bootstrap3支持的浏览器：

Chrome (Mac、Windows、iOS和Android)
Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的，只是官方并不提供支持。
Internet Explorer 8 和 9的很多CSS3属性和HTML5元素，例如圆角矩形和投影，不支持。
Internet Explorer 6 几乎不支持，nav, pagination 等在ie6上表现都特别差。
使用bootstrap2的bsie插件 http://www.bootcss.com/p/bsie/ ，提取插件里的 bootstrap-ie6.css 和ie.css，在页面的head里bootstrap.css之下加入如下代码：


禁用响应式布局：



html里的css代码：



打开 bootstrap-ie6.css文件，将文件里的pager替换为pagination，用于支持bootstrap3的分页组件。并在底部加入如下代码，代码作用请看注释：

/*　栅栏系统，溢出的问题 */
.col-xs-1 {
width: 5.7%
}
.col-xs-2 {
width: 13.96%
}
.col-xs-3 {
width: 22.2%
}
.col-xs-4 {
width: 30.5%
}
.col-xs-5 {
width: 38.8%
}
.col-xs-6 {
width: 47%
}
.col-xs-7 {
width: 55.2%
}
.col-xs-8 {
width: 63.5%
}
.col-xs-9 {
width: 72%
}
.col-xs-10 {
width: 80%
}
.col-xs-11 {
width: 88.3%
}
.col-xs-12 {
width: 100%
}

/* 修复ie6下分页组件css解析失败的问题 */
.pagination .active a,
.pagination .active span {
z-index: 2
color: #ffffff
cursor: default
background-color: #428bca
border-color: #428bca
}

/* 修复ie6下input样式被重写的问题*/
.form-control{
display: block
width: 100%
height: 34px
padding: 6px 12px
font-size: 14px
line-height: 1.428571429
color: #555555
vertical-align: middle
background-color: #ffffff
border: 1px solid #cccccc
border-radius: 4px
}
在html页body之上添加如下代码：