
Bootstrap
Bootstrap
Ayakanoinu
这个人不懒,但是也不想添加个人介绍
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Bootstrap 辅助类
文本通过对文本设置对应的类,可以获得不同的显示效果,和之前的BUTTON的类的设计相似,获得的效果实际上就是颜色的改变,常用类如下:对应的使用效果如下:实际上还是修改了文字的颜色,如果文字是超链接,鼠标放上去会让颜色变淡。背景对标签的类直接添加类,用于修改背景,但是一般背景不用这种方法设置,所以有些鸡肋,可设置的内容如下:获得的效果如图:不难看出效果还是很硬核地对背景进行修改...原创 2019-11-20 09:40:55 · 270 阅读 · 0 评论 -
Bootstrap 图片
通过对HTML中的img添加不同的类,可以获得不同的显示效果,主要有三种.img-rounded:添加 border-radius:6px 来获得图片圆角。.img-circle:添加 border-radius:50% 来让整个图片变成圆形。.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。.img-responsive:让图片支持响应式设计使用方法和其他...原创 2019-11-20 09:03:57 · 191 阅读 · 0 评论 -
Bootstrap 按钮
基本按钮通过将button标签中的class设置为对应的类,可以将button设置为不同的css格式,首先设置类为btn,不设置情况下为默认的html按钮格式,设置后变为bootstrap的基本按钮样式,之后根据需求,再继续添加对应的类,常用的类有:使用后效果如图:从上到下为:默认html按钮、bootstrap按钮基本样式、默认状态、原始按钮(蓝色)、成功(绿色)、弹出信息(蓝色)、提...原创 2019-11-10 22:04:02 · 604 阅读 · 0 评论 -
Bootstrap 表单
布局Bootstrap 提供了三种类型的表单布局:垂直表单、内联表单、水平表单。布局过程中常用的方法是将标签和空间放在一个div里面,并将div的类设置为form-group,设置之后控件和其标签可以作为一个整体进行操作。默认一个form-group组之后会切换到下一行。将标签用label包裹,之后将对应的控件的类设置为form-control。默认的布局是垂直布局,即在不对form设置类的...原创 2019-11-06 09:23:55 · 1048 阅读 · 0 评论 -
Bootstrap 表格
表格元素Bootstrap通过利用一些标签,为表格添加了一些效果,大体如下:具体效果表现表现为:①theda包裹的元素最好为为表的表头,搭配th使用后包裹的列下面会出现一条更粗的线。②表格主体用tbody标签包裹,搭配td使用后包裹的列下面会出现一条更细的线表格类通过对上面提到的表格元素添加各种类,可以获得更好的显示效果。上图中的类均为表格类,即设置在table标签中的类,设置...原创 2019-11-03 20:52:42 · 653 阅读 · 0 评论 -
Bootstrap 排版
small标签将要变小的标题用small标签包起来,能够得到字号更小颜色更浅的文本,常用与主标题配合使用达到副标题的效果,效果如下:单独使用的话只能得到一个比默认字体更小更细的效果,没有太大的使用效果。lead类为了给段落添加强调文本,则可以添加 class=“lead”,这将得到更大更粗、行高更高的文本,效果如下:使用时在段落标记中加入class="lead"即可,效果表现为段落的...原创 2019-11-02 22:19:45 · 332 阅读 · 0 评论 -
Bootstrap 容器(container)
具体使用如下:<div class="container"> ...</div>Bootstrap 3 的 container class 用于包裹页面上的内容。将最外层的div的类设置为container就可以应用,源代码中容器的定义如下:.container { padding-right: 15px; padding-left: 15px;...原创 2019-10-30 09:15:57 · 853 阅读 · 0 评论 -
Boostrap 响应式图像
具体格式如下<img src="..." class="img-responsive" alt="响应式图像">通过将类名设置为"img-responsive",从而将这个图片设置为响应式的,具体表现为自动调节大小,源代码中定义为:.img-responsive { display: block; height: auto; max-width: 100%;}...原创 2019-10-30 09:11:25 · 154 阅读 · 0 评论 -
Bootstrap 网格系统
bootstrap包含了一个响应式的,移动设备优先,不固定的网格系统,可以随着屏幕的伸缩,改变列的大小和数量,同行最多12列。代码使用@media根据屏幕的大小控制样式。先拿原文本介绍:网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(...原创 2019-10-30 09:03:46 · 237 阅读 · 0 评论