Bootstrap
Zyl_CN
这个作者很懒,什么都没留下…
展开
-
组件 —【按钮组的两端对齐】
btn-group-justified原创 2018-05-26 21:01:03 · 1797 阅读 · 0 评论 -
图片项 —【图片自适应】
img-responsive原创 2018-05-24 10:17:55 · 171 阅读 · 0 评论 -
图片项 —【改变图片形状】
img-原创 2018-05-25 09:26:24 · 632 阅读 · 0 评论 -
图片项 —【图片水平居中】
center-block原创 2018-05-25 09:26:38 · 670 阅读 · 0 评论 -
按钮项 —【按钮(文本)的样式】
<button class="btn btn-info">Like</button>给予引用类的元素添加默认的按钮样式注意以下的样式,要在btn类后使用btn-default 平常的样式btn-primary 主要按钮样式btn-success 成功按钮样式btn-info 信息按钮样式btn-warning 警告按钮样式btn-danger 危险按钮样式btn-...原创 2018-05-24 10:04:13 · 1540 阅读 · 0 评论 -
按钮项 —【按钮变宽】
btn-block原创 2018-05-24 10:06:56 · 562 阅读 · 0 评论 -
按钮项 —【按钮的激活】
active原创 2018-05-24 10:11:09 · 1355 阅读 · 0 评论 -
按钮项 —【按钮的禁用】
disabled原创 2018-05-24 10:13:20 · 268 阅读 · 0 评论 -
表单项 —【满屏文本框】
form-control原创 2018-05-23 09:50:45 · 347 阅读 · 0 评论 -
表单项 —【内联表单】
form-inline原创 2018-05-23 09:58:16 · 564 阅读 · 0 评论 -
表单项 —【添加控件】
input-group-addon原创 2018-05-23 10:00:52 · 260 阅读 · 0 评论 -
辅助项 —【显示与隐藏的响应式】
超小屏幕-手机(<768px) 小屏幕-平板(≥768px) 中等屏幕-桌面(≥992px) 大屏幕-桌面(≥1200px).visible-xs 可见 隐藏 隐藏 隐藏.visible-sm ...原创 2018-05-25 10:05:00 · 582 阅读 · 0 评论 -
辅助项 —【显示与隐藏】
.show和.hidden类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)这些类通过!important来避免CSS样式优先级问题就像quick floats一样的做法。注意,这些类只对块级元素起作用,另外,还可以作为 mixin 使用。.invisible 类可以被用来仅仅影响元素的可见性,也就是说,元素的 display 属性不被改变,并且这个元素仍然能够影响文档流的排布。<div...原创 2018-05-25 09:39:06 · 393 阅读 · 0 评论 -
辅助项 —【清除浮动】
clearfix原创 2018-05-25 09:33:31 · 174 阅读 · 0 评论 -
组件 —【分裂式下拉菜单】
<div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" dat原创 2018-05-26 21:02:49 · 446 阅读 · 0 评论 -
组件 —【额外元素的按钮】
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class原创 2018-05-26 21:04:59 · 157 阅读 · 0 评论 -
导航 —【导航栏概述】
<!--确保导航组件的可访问性:--><!--如果你在使用导航组件实现导航条功能,务必在<ul>的最外侧的逻辑父元素上添加role="navigation"属性--><!--或者用一个<nav>元素包裹整个导航组件。--><!--不要将role属性添加到<ul>上,因为这样可以被辅助设备(残疾人用的)上被识别原创 2018-05-26 21:23:54 · 409 阅读 · 0 评论 -
导航 —【导航栏样式】
标签式:<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"&am原创 2018-05-26 21:29:11 · 675 阅读 · 0 评论 -
导航 —【两端对齐的标签页】
nav-justified原创 2018-05-26 21:32:11 · 610 阅读 · 0 评论 -
导航 —【禁用的链接】
<ul class="nav nav-pills"> ... <li class="disabled"><a href="#">Disabled link</a></li> ...</ul>对任何导航组件(标签页、胶囊式标签页),都可以添加.disabled原创 2018-05-26 21:34:04 · 270 阅读 · 0 评论 -
导航 —【带下拉菜单的标签页】
<ul class="nav nav-tabs"> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation" class="dropdown"&a原创 2018-05-27 22:08:46 · 517 阅读 · 0 评论 -
辅助项 —【文字与背景颜色设置】
<p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...原创 2018-05-25 09:26:09 · 452 阅读 · 0 评论 -
辅助项 —【快速浮动】
pull-left / pull-right原创 2018-05-25 09:30:13 · 210 阅读 · 0 评论 -
辅助项 —【让内容变块居中】
center-block原创 2018-05-25 09:31:40 · 122 阅读 · 0 评论 -
表单项 —【水平排列】
form-horizontal原创 2018-05-23 10:10:19 · 1006 阅读 · 0 评论 -
表单项 —【只读状态】
readonly原创 2018-05-24 09:40:21 · 363 阅读 · 0 评论 -
基础项 —【栅格布局】
col-xs-n原创 2018-05-22 11:19:01 · 280 阅读 · 0 评论 -
基础项 —【内容水平居中】
text-center原创 2018-05-22 11:25:41 · 115 阅读 · 0 评论 -
分页 —【创建分页】
<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hid原创 2018-05-30 13:22:01 · 249 阅读 · 0 评论 -
分页 —【分页的激活与禁用】
disabled、active"原创 2018-05-30 13:27:11 · 733 阅读 · 0 评论 -
分页 —【改变分页的大小尺寸】
//pagination-lg:大。 pagination-sm:小原创 2018-05-30 13:32:42 · 1532 阅读 · 0 评论 -
分页 —【简单的翻页】
<nav> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a&原创 2018-05-30 13:35:05 · 142 阅读 · 0 评论 -
组件 —【图标的应用】
用icon Font图时要先引入。<link rel="stylesheet" href="XXX"/>在button按钮中插入一个图标<button class="btn btn-block btn-primary"> <i class="fa fa-thumbs-up"></i>Like &原创 2018-05-25 10:15:50 · 150 阅读 · 0 评论 -
组件 —【下拉菜单】
如果想要使用下拉菜单,需要先引入JS,才能正常使用:<script src="jquery-1.11.3.js"></script> //下拉菜单需要Jquery1.9.1以上的版本<script src="bootstrap.js"></script><div class="dropdown"> &原创 2018-05-25 10:47:10 · 321 阅读 · 0 评论 -
组件 —【按钮工具栏】
btn-toolbar原创 2018-05-26 20:47:27 · 240 阅读 · 0 评论 -
组件 —【多重按钮组嵌套】
<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class=原创 2018-05-26 20:49:59 · 331 阅读 · 0 评论 -
基础项 —【缩略语】
abbr标签对原创 2018-05-22 11:23:49 · 237 阅读 · 0 评论 -
基础项 —【满屏显示】
container-fluid原创 2018-05-22 11:19:24 · 309 阅读 · 0 评论 -
基础项 —【Bootstrap的引用】
为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签。<meta name="viewport" content="width=device-width, initial-scale=1">在移动设备浏览器上,通过为视口(viewport)设置meta属性为user-scalable=no可以禁用其缩放功能。这样禁用缩放功能后,用户只能滚动屏幕...原创 2018-05-22 11:19:12 · 457 阅读 · 0 评论 -
表单项 —【禁用状态】
disabled原创 2018-05-24 09:44:12 · 262 阅读 · 0 评论