Bootstrap初步

>简介

Bootstrap是基于HTML、CSS、JavaScript的样式库，它简单灵活，使得web开发更加快捷；

>使用

Bootstrap样式库下载引入进来就能使用；

引用：

测试：

<button class="btn-danger">警告</button>

>栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-*不存在，也影响大屏幕设备。

>栅格参数

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

针对参数类型值：.col-xs-.col-sm-.col-md-.col-lg-的区别就是赋予每列的最大宽度值，如果小于指定的宽度就换行平铺；

测试格栅系统代码：可以在分配好的列里，再写row行，然后再进行分配12份；

<!DOCTYPE html>
<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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><!--css--><link rel="stylesheet" href="css/bootstrap.min.css" /><!--jq--><script type="text/javascript" src="js/jquery-1.11.0.js" ></script><!--JS--><script type="text/javascript" src="js/bootstrap.min.js" ></script><title></title><style type="text/css">.tdc{ border: 2px solid red;}.tdr{ border: 2px solid aqua;}.td{ border: 2px solid yellow;}</style></head><body><button class="btn-danger">警告</button><div class="container tdc"><div class="row tdr"><!--默认12列，三列一部份，等分成四部份--><div class="col-md-3 td">1</div><div class="col-md-3 td">2</div><div class="col-md-3 td">3</div><div class="col-md-3 td">4</div></div></div></body>
</html>

>well组件

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。

通常写登陆时，将输入框放入其中：


<div class="well">您好，我在 Well 中！</div>

>bootstrap中有一些专门为残障人士浏览网页设计的class

比如：

 <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>

<span class="sr-only">(current)</span>

>Bootstrap表单验证可以使用插件bootstrapValidator

学习阶段还是自己去实现表单验证；

Bootstrap初步相关推荐

【BootStrap】初步教程
[html] view plaincopy <span style="font-family: Arial, Helvetica, sans-serif;">最近刚刚接 ...
angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习...
废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...
初步使用bootstrap框架
在web前端的页面中,少不了用到按键.输入框之类的元素.之前有一个项目,做完后领导说你这个按键怎么点击样式没变化.后来参照了一些别的例子,发现自己做的确实用户体验不好.最近接触了bootstrap,下 ...
Bootstrap CSS入门初步学习---导航栏设计、代码展示
1.基础导航栏制作步骤: 1.添加一个容器<nav>或<div>标签,使用.navbar类和.navbar-default类,并且添加role="navigation ...
java中execution的作用_一文初步了解Java虚拟机
大家都知道,Java中JVM的重要性,学习了JVM你对Java的运行机制.编译过程和如何对Java程序进行调优相信都会有一个很好的认知. 什么是JVM? JVM(Java Virtual Machin ...
MPB：微生物所东秀珠组-基于16S rRNA基因和基因组序列对细菌物种的初步鉴定...
为进一步提高<微生物组实验手册>稿件质量,本项目新增大众评审环节.文章在通过同行评审后,采用公众号推送方式分享全文,任何人均可在线提交修改意见.公众号格式显示略有问题,建议电脑端点击文末阅 ...
【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...
Drupal7主题初步设置篇-Ubuntu 14.04 LTS
国人对于网站的要求同国外还是有很大的区别的,国外对网站的内容十分看重,而对外观则并不太看重,国人则相反,相对来说对网站的外观更为看重,所以有个好的主题对于国内网站来讲就必不可少了.由于我比较喜欢Boo ...
ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步
一.区域-麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念-区域(Area). 在项目上右击创建新 ...

Bootstrap初步

Bootstrap初步相关推荐

最新文章

热门文章