![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
BOOTSTRAP
拖石马
这个作者很懒,什么都没留下…
展开
-
bootstrap学习一
Bootsrap是一款优秀的前端开发框架,我从慕课网上开始学习Bootstrap,以下我学习过程中的一些笔记及代码。首先学习排版:从Bootstrap网站下载Bootstrap3中文文档(V3.3.5),解压到本地。由于幕课上排版系列课程主要用的是Bootstrap的Css,所以下载解压,将其中的bootstrap.min.css复制粘贴到我保存html文件里的一个styles文件夹中,此...转载 2018-10-15 15:53:13 · 296 阅读 · 0 评论 -
BOOTSTRAP表单控件之按钮
按钮制作按钮常用:input[type=“submit”] input[type=“button”] input[type=“reset”] <button>在Bootstrap框架中的按钮都是采用<button>来实现基本按钮类:.btn 用法:<button class="btn" type="button">按...原创 2018-10-24 15:48:43 · 565 阅读 · 0 评论 -
BOOTSTRAP框架之CSS类(表单控件)
按钮制作按钮常用:input[type=“submit”] input[type=“button”] input[type=“reset”] <button>在Bootstrap框架中的按钮都是采用<button>来实现表单控件大小类:Bootstrap框架提供两个类名,控制表单控件的高度。input-sm:让控件比正常大小更小i...原创 2018-10-23 17:28:30 · 623 阅读 · 0 评论 -
BOOTSTRAP框架CSS类三之表单
基础表单:在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。宽度变成了100%;设置了一个浅灰色(#ccc)的边框;具有4px的圆角;设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化;设置了placeholder的颜色为#999<form role="...原创 2018-10-22 16:55:40 · 249 阅读 · 0 评论 -
Bootstrap框架CSS类二之表格
表格类: .table:基础表格 .table-striped:斑马线表格 .table-bordered:带边框的表格.table-hover:鼠标悬停高亮的表格 .table-condensed:紧凑型表格 .table-responsive:响应式表格Bootstrap为表格提供了1种基础样式和4种附加...原创 2018-10-22 15:25:01 · 301 阅读 · 0 评论 -
BootStrap框架CSS类一之文本列表
一:标准html模板<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&原创 2018-10-22 10:44:19 · 323 阅读 · 0 评论 -
布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html原创 2018-10-19 15:20:21 · 94 阅读 · 0 评论 -
bootstrap中container和container-fluid区别
‘container ’demo<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">&am转载 2018-10-19 12:01:00 · 1448 阅读 · 0 评论 -
Bootstrap之栅格系统
1、栅格系统(布局)Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:网格系统...转载 2018-10-16 17:31:29 · 2659 阅读 · 0 评论 -
bootstrap学习三
Bootstrap学习笔记(三) 网格系统4-1实现原理 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。 <div class="container"> &...转载 2018-10-15 15:56:21 · 103 阅读 · 0 评论 -
bootstrap学习二
Bootstrap学习笔记(二) 表单在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变。3-1 基础表单 单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-con...转载 2018-10-15 15:55:02 · 811 阅读 · 0 评论 -
Bootstrap框架之图片
Bootstrap框架中对于图像的样式风格提供以下几种风格:img-responsive:响应式图片,主要针对于响应式设计img-rounded:圆角图片 img-circle:圆形图片 img-thumbnail:缩略图片使用方法:使用方法非常简单,只需要在<img>标签上添加对应的类名<div class="conta...原创 2018-10-24 16:37:06 · 783 阅读 · 0 评论