Bootstrap
世间百态不过尔尔
web前端开发工程师 (深圳)
展开
-
响应式布局(响应式网页的构成&bootstrap框架)
一、响应式布局1、概念响应式又叫自适应网页,可以根据网页窗口的调整而自动布局,不会导致页面效果的错乱,主要是针对移动端浏览器;通过响应式布局,可以使一套代码同时兼容多个尺寸的屏幕2、响应式网页的构成1)允许网页自动调整使用viewport属性,让窗口可以自动伸缩语法:<meta name="viewport" content = "width=device-width,initi...原创 2019-03-14 21:51:31 · 2157 阅读 · 0 评论 -
排版&栅格
1、排版在bootstrap中,提供了一些排版相关的特性,比如副标题、段落相关等1)副标题使用创建副标题2)引导主体副本给段落添加强调文本,通过.lead实现,增大字体,增加行高3)强调<strong></strong>、<em></em>在bootstrap中提供了一批用于强调文本的类4)缩写提供了用于缩写的标原创 2019-03-14 21:52:46 · 684 阅读 · 0 评论 -
Bootstrap表单
表单1、基本表单把标签和控件放在一个带有.form-group的div中,会使元素间有一定的空隙,同时给表单控件添加.form-control2、水平表单通过向form添加.form-horizontal,并联合使用栅格,可以将label和控件水平布局,这是form-group就类似于.row;此外需要向标签添加.control-label3、表单控件状态通过给父元素添加相应的cla...原创 2019-03-14 21:58:41 · 244 阅读 · 0 评论 -
Bootstrap(well&页数&标签&角标&巨幕)
1、wellwell是一种具有凹陷效果的内容显示元素,只需要给元素添加class = well即可还可以通过class调整well的尺寸-.well-lg-.well-sm注意,上面两个类,需要与well结合使用2、页数-pagination,通过该类,可以显示页码效果,可以通过给li添加.disabled或.active来表示不同的页面效果-.pager实现翻页按钮,可以通过给l...原创 2019-03-14 22:00:24 · 1056 阅读 · 0 评论 -
Bootstrap(页头&缩略图&警告框&进图条&面板)
1、页头会在网页标题四周添加适当的间距,需要将div的class设置为page-header2、缩略图通过添加class=thumbnail,会添加边框及内边距,当使用超链接作为thumbnail时,鼠标悬停会有一个轮廓我们可以通过给一个div设置thumbnail,实现自定义的缩略图内容,可以将图片进行分组4、警告框可以通过添加.alert实现警告框,同时需要结合状态类:.aler...原创 2019-03-14 22:01:31 · 358 阅读 · 0 评论 -
Bootstrap(导航&导航条)
1、导航1)标签页通过给列表添加class = nav-tabs和 nav2)胶囊式导航栏给列表设置class为nav和nav-pills3)垂直胶囊式在原有nav的基础上添加类.nav-stacked通过给li添加.active表示当前所处的导航位置4)两端对齐的导航可以通过添加类.justified 让导航栏与父元素等宽2、导航条通过向nav标记添加类.navbar...原创 2019-03-14 22:02:16 · 1215 阅读 · 0 评论 -
Bootstrap(组件)
组件:1、字体图标在网页中显示某些图标,通过设置相应的类,所有的图标都需要基类和单独的图标类,包含图标的元素需要独立使用,尽量使用span元素;图标类尽量不要包含文字或子元素2、下拉菜单.dropdown类用于显示连接列表的,可切换、有上下文的菜单;有一个拥有此类的父元素,包含一个下拉按钮和一个列表-button需要dropdown-toggle的类,需要设置id属性、需要设置data-...原创 2019-03-14 22:03:07 · 154 阅读 · 0 评论 -
bootstrap中提供的插件(模态框&工具提示&弹出框&滚动监听&轮播图)
1、介绍bootstrap中提供了12中jq插件,大部分插件可以在不编写任何代码的情况下触发引用boostrap插件的方式有两种-单独引用:使用其js文件,通过.插件名进行引用-data属性在boostrap中,自定义了data属性,可以通过该属性直接引用插件,不需要js语句2、模态框模态框是覆盖在父元素上的一个子界面,主要用来显示单独的内容,可以在不离开父元素的基础上进行交互 ...原创 2019-03-14 22:05:31 · 579 阅读 · 0 评论