Bootstrap 入门


@{
    Layout = null;
}





    
    Induction


    
@*1. 自适应网页设计 首先,在网页代码的头部,加入一行 viewport元标签。viewport是网页默认的宽度和高度, 上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例 (initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个 设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用 css3-mediaqueries.js。*@ @*2. 轮播组件 carousel 通过 javascript 初始化轮播组件,接受一个可选的object类型的options参数,并开始幻灯片循环。 $('.carousel').carousel({ interval: 2000 , //图片轮换的等待时间 //还有其他两种: pause 类型String 默认值是"hover" 鼠标放上去暂停轮播,离开开始轮播 //wrap 类型boolean 默认值是true 是否持续轮播 }); 直接放入参数值 .carousel(‘cycle’) 从左到右循环各帧。 .carousel(‘pause’) 停止轮播。 .carousel(number) 将轮播定位到指定的帧上(帧下标以0开始,类似数组)。 .carousel(‘prev’) 返回到上一帧。 .carousel(‘next’) 转到下一帧。*@ @*3. 响应式图片 Responsive image 通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是 为图片赋予了max-width: 100%;和height: auto;属性,可以让图片按比例缩放,不超过其父元素的尺 寸。*@ @*1. 标题样式 除了有标签 h1~h6 之外,bootstrap还提供了对应的六个类名:.h1~.h6 重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px;h4~h6重置后的值都是10px。 所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体。 固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。 2.副标题 small标签 行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999) 内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75% 3.段落P强调内容 lead类样式 如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。 用法:

我是普通文本,我的样子长成这样我是普通文本,我的样子长成这样我是普通文本,

我是特意要突出的文本,我的样子成这样。我是特意要突出的文本,我的样子长成这样。

4.粗体 在Bootstrap中,可以使用标签让文本直接加粗。 5. 斜体 斜体类似于加粗一样,除了可以给元素设置样式font-style值为italic实现之外,在Bootstrap中还可以通过使用标签来实现。 6.强调相关的类 在Bootstrap中除了使用标签等说明正文某些字词、句子的重要性,Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下: .text-muted:提示,使用浅灰色(#999) .text-primary:主要,使用蓝色(#428bca) .text-success:成功,使用浅绿色(#3c763d) .text-info:通知信息,使用浅蓝色(#31708f) .text-warning:警告,使用黄色(#8a6d3b) .text-danger:危险,使用褐色(#a94442) 7.文本对齐风格 .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐 8.列表 去点列表:通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。 内联列表:通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。 水平定义列表:Bootstrap可以给 添加类名“.dl-horizontal”给定义列表实现水平显示效果。 9.代码相关 使用来显示单行内联代码 使用
来显示多行块代码
                使用来显示用户输入代码
                Y轴出现滚动条:在pre标签上添加类名“.pre-scrollable”
            10.表格
                .table:基础表格
                .table-striped:斑马线表格
                .table-bordered:带边框的表格
                .table-hover:鼠标悬停高亮的表格
                .table-condensed:紧凑型表格
                .table-responsive:响应式表格
            10-1.表格行的类
                .active	表示当前活动的信息
                .success	表示成功或者正确的行为
                .info	表示中立的信息或行为
                .warning	表示警告,需要特别注意
                .danger	er 表示危险或者可能是错误的行为
            10-2.基础表格 注意
                在Bootstrap中,对于基础表格是通过类名“.table”来控制。如果在元素中不添加任何类名,
                表格是无任何样式效果的。
            10-3.响应式表格
                在Bootstrap中也为表格提供了响应式的效果,将其称为响应式表格。
                Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式
                效果,然后将置于这个容器当中,这样表格也就具有响应式效果。
                Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平
                滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。
            11. 基础表单
                类名form-control
                1、宽度变成了100%
                2、设置了一个浅灰色(#ccc)的边框
                3、具有4px的圆角
                4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
                5、设置了placeholder的颜色为#999

                类名 form-horizontal
                水平表单风格(标签居左,表单控件居右)

                类名form-inline
                将表单的控件都在一行内显示

                表单控件(输入框input)
                单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中
                使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,
                因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,
                对应的是input[type=“text”])的形式来定义样式的。为了让控件在各种表单风格中样式
                不出错,需要添加类名“form-control”

                表单控件(下拉选择框select)
                多行选择设置multiple属性的值为multiple
                
                

                表单控件状态(焦点状态)
                焦点状态是通过伪类“:focus”来实现
                表单控件状态(禁用状态)
                只需要在需要禁用的表单控件上加上“disabled”即可
                

                在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。
                如果legend中有输入框的话,这个输入框是无法被禁用的。
                表单控件状态(验证状态)
                    1、.has-warning:警告状态(黄色)
                    2、.has-error:错误状态(红色)
                    3、.has-success:成功状态(绿色)
                    使用的时候只需要在form-group容器上对应添加状态类名。
                    很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:
                
表单提示信息 平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。 使用了一个help-block样式,将提示信息以块状显示,并且显示在控件底部。help-inline让提 示信息显示在控件的后面,也就是同一水平显示 12.按钮 块状按钮 Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满 整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮 称为块状按钮。 按钮状态——禁用状态 方法1:在标签中添加disabled属性 方法2:在元素标签中添加类名“disabled” *@ @*图像*@ @*img-responsive:响应式图片,主要针对响应式设计 img-rounded:圆角图片 img-circle:圆角图片 img-thumbnail:缩略图片 (注意:由于样式没有对图片做大小上的样式限制,所以在实际使用的时候,需要通过其他的方式来处理图片大小。 比如控制图片容器大小(不能通过css样式直接修改图片的大小,这样就不相应了)。*@ @*网格系统*@ @*1.数据行(.row)必须包含在容器(.Container)中,以便为其赋予合适的对齐方式和内距(padding). 2.在行(.row)中可以添加列(.column),但列数之和不能超过评分的总行数,比如12. 3.具体内容应当放置在列容器(column)之内,而且只有列(column)才可以做为行容器(.row)的直接子元素。 4.通过设置内距(padding)从而参加列与列之间的间距。然后通过为第一列和最后一列设置负值的外句(margin)来抵消内距(padding)的影响*@ @*下拉菜单(基本用法)*@ @*1.使用一个名为"dropdown"的容器包裹了整个下拉菜单元素 2.使用了一个按钮做为父菜单,并且定义类名"dropdown-toggle"和定义"data-toggle"属性,且值必须和最外容器类名一致 3.下拉菜单项使用一个ul列表,并且定义一个类名为"dropdown-menu"(下拉菜单对齐方式):Bootrapt框架中下拉菜单默认是 左对齐如果你想相对于父容器右对齐时,可以在"dropdown-menu"上添加一个"pull-right"或者"dropdown-menu-right"类名*@ @*按钮(等分按钮)*@ @*等分按钮也常被称为是自适应分组按钮,其现实方法也非常的简单,只需要在按钮组"btn-group"上追加一个 "btn-group-justified"类名(在制作等分按钮组是,请尽量使用标签来制作按钮)*@ @*基础导航条*@ @*".navbar"样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有 进行如何的设置,而导航条的颜色都是通过".navbar-default"来进行控制(1.加入导航条标题 2.常常在菜单前面都会有一个标题(文字字号比其他文字稍大一些),其实在bootstrap框架也为 大家做了这方面考虑,其通过"navbar-header"和"navbar-brand")来实现*@ @*警示框-默认警示框*@ @*1.成功警示框:告诉用户操作成功,在"alert"样式基础上追加"alert-success"样式,具体呈现 的是背景、边框和文本都是绿色; 2.信息警示框:给用户提供提示信息,在"alert"样式基础上追加"alert-info"样式,具体呈现的是 背景、边框和文本都是浅蓝色; 3.警告提示框:提示用户小心操作(提供警告小心),在"alert"样式基础上追加"alert-warning"样式 ,具体呈现的是背景、边框、文本都是浅黄色 4.错误警示框:提示用户操作错误,在"alert"样式基础上追加"alert-danger"样式,具体呈现的是背景、 边框和文本都是浅红色 (警示框-可关闭的警示框) 1.需要在基本警示框"alert"的基础上添加"alert-dismissable"样式。 2.在button标签中加入class="close"类,实现警示框关闭按钮的样式。 3.要确保关闭按钮元素上设置了自定义属性:"data-dismiss="alert"(因为可关闭警示框需要借助 JavaScript来检测该属性,从而控制警示框的关闭)" (警示框-警示框的链接) bootstrap框架是通过给警示框加的链接添加一个名为"alert-link"的类名,通过"alert-link"样式给链接提供高亮显示*@ @*18.媒体对象–默认媒体对象 ☑ 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容 ☑ 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片 ☑ 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容 ☑ 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选 除了上面四个部分之外,在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。 19.js插件引入 一次性引入 Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js)。 单独导入: ☑ 动画过渡(Transitions):对应的插件文件“transition.js” ☑ 模态弹窗(Modal):对应的插件文件“modal.js” ☑ 下拉菜单(Dropdown):对应的插件文件“dropdown.js” ☑ 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js” ☑ 选项卡(Tab):对应的插件文件“tab.js” ☑ 提示框(Tooltips):对应的插件文件“tooltop.js” ☑ 弹出框(Popover):对应的插件文件“popover.js” ☑ 警告框(Alert):对应的插件文件“alert.js” ☑ 按钮(Buttons):对应的插件文件“button.js” ☑ 折叠/手风琴(Collapse):对应的插件文件“collapse.js” ☑ 图片轮播Carousel:对应的插件文件“carousel.js” ☑ 自动定位浮标Affix:对应的插件文件“affix.js”*@ @*模态弹出框 data-toggle:字符(modal)用来控制模态弹出框的显示(必须要在触发元素上定义 一个属性,而且值只能是modal) data-target:字符(用户自定义)data-target用来定义要触发的模态弹出窗是哪一个. 其值可以是"div.modal"元素独有的类名,或者ID名。(必须要在触发元素上定义一个属性, 而且需要与div.modal中的独有类名或ID匹配) data-backdrop:布尔值(true)是否包含一个背景div元素,如果为真,则单击该背景时 关闭弹出窗,如果取值为static,则单击背景div元素时不会关闭弹出窗。 data-keyboard:布尔值(true)按键盘的ESC键就可以关闭弹出窗,如果值为false,则无 法通过ESC键来关闭弹出窗。 data-show:布尔值(true)初始化时,弹出窗是否显示。 href(URL路径)空值 如果通过a元素来触发模态弹出窗,其href值不是一个以#开头的值, 则表示是一个url地址,模态弹出窗会先加载其内容,然后体会原有的modal-content中的内容。 那么data-target则必须填写制定id.*@ @*模态弹出框-JavaScript触发时的参数设置*@ @*1.backdrop布尔值(true)描述:是否包括一个背景div元素,如果设置为true,则单击该背景,模态弹出 框会关闭,如果取值为static,单击该背景时不关闭模态弹出窗(等同于自定义认属性中的data-backdrop) 2.keyboard布尔值(true)描述:按ESC键关闭模态弹出窗;如果取值为false,按ESC键无法关闭模态弹出窗 (等同于自定义属性中的data-keyboard属性) 3.show布尔值(true)描述:初始化模态弹出窗是否显示(等同于自定义属性中的data-show)属性 4.remote URL(空值)描述:远程获取remote指定的url的内容来填充模态弹出窗的内容(等同于a链接元素 中的href属性) 5.toggle(使用:$("#mymodal").modal("toggle"):触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的, 则关闭;反之,如果模态弹出窗是关闭的,则显示。) 6.show(使用:$("#mymodal").modal("show"):触发时,显示模态弹出窗) 7.hide(使用:$("#mymodal).modal("hide"):触发时,关闭模态弹出窗)*@ @*模态弹出窗事件设置:(弹出前、弹出后、关闭前、关闭后) 1.show.bs.modal:在show方法调整用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件 的relatedTarget属性 2.shown.bs.modal:该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发:如果单击了一个元素 ,那么该元素将作为事件的relatedTarget事件 3.hide.bs.modal:在hide方法调用时(但还未关闭隐藏)立即触发 4.hidden.bs.modal:在事件在模态弹出窗完全隐藏之后(并且css动画漂完成之后)触发*@

 

你可能感兴趣的:(Bootstrap,前端,Bootstrap)