bootstrap教程

一、栅格系统
1、容器:包含两种容器,

10年积累的网站建设、成都网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有梨林免费网站建设让你可以放心的选择与我们合作。

  • 流体容器:container-fluid,宽度始终为100%( 但是两边有padding )
  • container:固定宽度的容器,有固定、1170、970、750、auto等选项,
  • 屏幕宽度<768,container宽度auto
  • 屏幕宽度768~992,container宽度750
  • 屏幕宽度992~1200,container宽度970
  • 屏幕宽度>1200,container宽度1170

2、数据行(.row)必须包含在容器中,在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数12,具体内容应当放置在列容器(.column)之内,而且只有列(.column)才可以作为行容器(.row)的直接子元素
col-lg-、col-md-、col-sm-、col-xs-

col

col

col

col

每个类名,都代表在该屏幕大小下才起作用

col

col

//只有在大屏幕下,才会排成一行,其他屏幕下,就当做col-lg-6这个类名没有生效,因为是div,独占一行,所以肯定就排2行了

满足条件的时候,每个div永远都是水平排列的,如果不满足条件了,就代表类名没有生效,因为是div,独占一行,所以肯定就依次往下排了
理解:每个div,上面的数值是几,就代表其占据了多少的空间,比如
.item1的div,
col-lg-3:在大屏幕,占据3块,即屏幕的四分之一
col-md-6:在中等屏幕,占据6块,即屏幕的二分之一
col-sm-12,col-xs-12:在小或超小屏幕,占据12块,即占据一整个屏幕,在这种屏幕下,其他的都得往下面排

3、
列偏移:只能往右偏
col-*-offset-n:div向左偏移n个网格单位,(1<= n <=12)

列排序:push往右偏,pull往左偏

col-lg-2
col-lg-10

加上push、pull,效果相当于二者换了个位置

4、row可以嵌套,子级就以父级宽度为总宽度,然后再以12个网格平均分配

5、遇到网格高度不一样,排列不均匀,可以在需要的地方清除浮动:
bootstrap教程


bootstrap教程
注意点:一个页面中,可以有多个容器,比如头部导航是100%宽度,就使用container-fluid;中间内容区域为固定宽度,就使用container;但是容器之间最好不要有嵌套 关系,比如container里面嵌套container

二、响应式工具
在不同的设备上,页面要展示的内容也不一样,电脑上展示的就多,手机上展示的就少,适当取舍;
比如右侧的导航菜单,大屏幕显示,小屏幕隐藏
概念:针对于不同设备展示或隐藏页面的内容

  • 可见类:visible-a-b
    a:lg md sm xs
    b:block inline inline-block
    举例:

    col-lg-6

    表示:在大屏幕上,div才显示,且以block的块级元素形式显示,否则都不显示

  • 隐藏类:hidden-a
    a:lg md sm xs
    举例:


    表示:在手机屏幕或上小屏幕上,div隐藏,其他情况都显示

  • 打印类:visible-print-* hidden-print
    只有在打印页面时,才会显示或者隐藏页面的某部分内容

三、Glyphicons字体图标
好处:减少请求、容易控制样式
用法:font-face、字体路径

四、预定义样式风格
包括按钮btn-、弹框alert-、面板panel-、背景相关bg-、文字颜色text-

  • primary:首选项
  • success:成功
  • info:一般信息
  • warning:警告
  • danger:危险


Title! Alert body ...

Panel title

Panel content

一行段落

文字颜色

以上的样式分格,可以应用到所有的标签上,比如a标签

链接
链接
链接

四、大小
-[ lg、sm、xs ]:包括按钮、输入框等都可以应用此类来控制大小,这种大小和屏幕尺寸有关系;大的屏幕用大的按钮,小的屏幕用小的按钮

btn-lg、btn-sm、btn-xs  

input-lg、input-sm、input-xs

五、按钮
基类:btn
样式:btn-default(默认) btn-link(链接)
大小:btn-[ lg、sm、xs ]
状态:active、disabled
种类:a input button,这三种可以用于按钮制作【推荐使用button来写按钮】

//input按钮文字写在value里,button和a写在标签里

按钮

块级:btn-block,按钮默认是行内元素,加上这个就变成块级元素,适合在移动端使用
按钮组:

  • btn-group:改为按钮组,按钮之间没有间隙
  • btn-group-justified:横向按钮组,默认,需要配合btn-group使用
  • btn-group-vertical:纵向按钮组,此时不需要再加btn-group
  • btn-group-[ lg、sm、xs ]:大小改变
    按钮上面加箭头:使用类名caret
    按钮  
    
    input不行

    bootstrap教程

箭头向上:

// 添加类名dropup

bootstrap教程

六、下拉菜单
属性:
data-toggle="dropdown"(js交互操作)不单单是下拉菜单,别的组件也是如此,比如选项卡:data-toggle="tab"
aria-(针对特殊人群)
role(针对特殊人群)
open
dropdown-menu-right:加在dropdown-menu上,可以使得下拉菜单靠右
dropdown-header
divider
实现下拉菜单:三个class+data-toggle="dropdown"
三个class:父级dropdown,触发按钮dropdown-toggle,下拉菜单内容dropdown-menu
触发按钮上加上data-toggle="dropdown"
默认下拉框




$("#drop2").on("shown.bs.dropdown",function(){
            alert(1)
    });

不仅仅是button可以做下拉菜单,a标签也可以,只要加上了data-toggle="dropdown"

下拉菜单的展开隐藏,可以通过标签上写:data-toggle="dropdown"控制,也可以通过写js控制
比如:
$(".dropdown-toggle").dropdown(); //也可以控制下拉菜单的显示,但是不能隐藏,这是区别,注意!!
其他的,比如选项卡,用js控制的话都是类型的原理:方法名和自定义属性名一样
标签:data-toggle="tab"
js:$(".nav-tabs").tabs();
【注意点】用js控制多个下拉菜单,彼此之前不互相影响,然后再借用js,就可以做到显示隐藏,且多个下拉框之间互不影响;
但是用标签来写,彼此之间会有影响,且点击一个下拉框,会默认把其他的下拉框都隐藏,只显示当前点击的那个

data-target=".dropdown"  :指定哪些元素参与控制
$(".dropdown").on("show.bs.dropdown",function(){
        alert(1)
});
$(".dropdown").on("shown.bs.dropdown",function(){
        alert(1)
});
$(".dropdown").on("hide.bs.dropdown",function(){
        alert(1)
});
$(".dropdown").on("hiden.bs.dropdown",function(){
        alert(1)
});

七、选项卡

头部:

  • nav+nav-tabs:这两个必须得加,构成默认选项卡
  • nav-justified:选项卡等分父级宽度
  • nav-tabs-justified:选项卡下面的线和选项卡原本的宽度一致,不会和父级宽度一致
  • nav-pills:面包屑选项卡
  • nav-stacked:竖状菜单栏,和nav-pills一起使用
  • 带下拉菜单的头部
    内容:
  • tab-content:选项卡内容区
  • tab-pane:每个选项卡块的内容
  • data-toggle="tab":选项卡头部导航都得加上这个
  • href对应id:头部对应内容切换
  • 淡入淡出方式:当前active选中的加上fade in,未选中的加上in
  • 鼠标移入方式

带下拉菜单的切换

八、导航条
基类:navbar
navbar-default
nav navbar-nav
navbar-inverse
navbar-static-top:去掉两边圆角
navbar-fixed-top:固定在头部
navbar-fixed-bottom:固定在底部
遮挡内容的问题:给body加上margin-top即可

navbar-header
navbar-brand:网站logo,可以是文字或者图片
navbar-left:导航菜单靠左
navbar-right:导航菜单靠右
navbar-btn:按钮在导航条里面上下居中
navbar-link:链接在导航条里面上下居中
navbar-text:文字在导航条里面上下居中
navbar-form

带下拉菜单的导航条
响应式导航条:
navbar-toggle
collapse
navbar-collapse
滚动监听
data-spy
data-target
data-offset:监测走到距离顶部多少距离还是发生改变
举例:监听body,页面走到哪里,导航条随之改变对应的导航
body{ position:relative; }
.section{padding-top:50px;}

导航条的导航里面的a标签的href值对应,页面内容区域的id

九、各个组件
1、bs3-thumbnail:content
缩略图:
bootstrap教程

2、bs3-alert-success
警告框:可以用于在填写表单时的提示信息,填写是否符合要求
bootstrap教程

3、bs3-media
媒体对象
左右对齐结构,左边图片右边文字或者左边文字右边图片,可以用于构建新闻,不仅仅是图片,可以是视频等等,文字也可以带有标题,类似于新闻标题
bootstrap教程

4、bs3-list-group
列表组
和表格不一样,只有表格的一列,用于显示一列数据
bootstrap教程

5、徽章
bootstrap教程

6、bs3-panel-success
面版
可以带有头部、内容区、底部

十、零碎知识点
1、
左浮动:pull-left;
右浮动:pull-right;
固定定位:affix;
居中:

  • 加类.text-center(子元素居中)
  • 加类.center-block(自身居中)
  • 利用bootstrap中列偏移的概念。例如:col-md-offset-2(外边距向右偏移两列)

2、在容器里面,

bar

bar所在的div不能和右边重合,会有padding值,解决办法:
放进row里面或者拿出container,即:

bar
//放进row里面
bar
//拿出container外面
完整的选项卡代码
home的内容
tab的内容
$("#myTabs a").mouseover(function(){ $(this).tab("show"); });

新闻标题:bootstrap教程
分享路径:http://hbruida.cn/article/gidccc.html

其他资讯