Bootstrap 第一天
Bootstrap第一天
1、什么是Bootstrap?
Bootstrap是由两位设计开发的。
Bootstrap主要是前端的框架(HTML、CSS、JS)。
2、为什么使用Bootstrap或者Bootstrap有什么样的特点?
- 学习比较简单,只要有了HTML、CSS、JS基础,就可以学习。
- 响应式布局。
- 移动设备优先。
中文网址:http://v3.bootcss.com/
Bootstrap环境安装
Bootstrap下载
要想使用Bootstrap必须要加载jquery。
Bootstrap基本模板
1、HTML5文档类型定义
Boostrap的文档是基于HTML5的。因此,要使用HTML5的文档类型定义(DTD)。
2、字符集设置
3、移动设备优先
4、引入CSS和JS文件
CSS全局样式
1、布局容器类样式:.container 和 .container-fluid
- .container固定宽度并且具有响应式。
- .container-fluid自由宽度(100%宽度)。
2、标题样式:<h1>到<h6>、.h1 ~ .h6
<h1>……<h6>样式重写了,基本上做到了兼容性。
3、行内文本样式:
- <b>:加粗
- <strong>加粗
- <i>:斜体
- <em>斜体,HTML5新标记
- <del>删除线,HTML5新标记。
- <s>删除线
4、文本对齐样式:.text-left、.text-center、.text-right、.text-justify
- .text-left:文本左对齐
- .text-right:右对齐
- .text-center:居中对齐
- .text-justify:两端对齐
5、列表样式:、
- .list-unstyled(无符号):去掉前面的符号。
- .list-inline(行内块)
表格样式
1、.table :表格全局样式(少量padding和水平方向的分割线)。
2、.table-striped:有条纹的背景色行(隔行变色)
3、.table-bordered:带边框的表格
4、.table-hover:鼠标悬停效果(放上变色、离开恢复)
5、.table-condensed:紧凑的表格(单元格内补会减半)
6、行或单元格背景色:
- .active:当前样式
- .success
- .info
- .warning
- Danger
- 注意:只能给<tr>或<td>添加类样式。
7、响应式表格:
将.table元素包裹在.table-responsive元素内,即可创建响应式表格
当屏幕宽度小于768px时,表格会出现滚动条。
当屏幕宽度大于768px时,表格的滚动条自然消失。
表单样式
.form-group表单组样式:将<label>和表单元素包含其中,可以获得更好的排列
.form-control表单元素样式:常用于<input>、<textarea>、<select>元素。
Placehoder属性
- 描述:给<input>添加提示信息的。
- 说明:这个属性是HTML5新增加的。
.form-inline内联表单样式(用于form元素):可以使元素一行排列。
.sr-only:可以用于隐藏元素。
转载于:https://www.cnblogs.com/Prozhu/p/5524360.html
Bootstrap 第一天相关推荐
- Bootstrap 第一篇
学习Bootstrap 第一天: 1.下载安装WinLess工具 网址:http://winless.org (把less 转换为css) 2.下载安装Node.js 网址:http://nod ...
- Bootstrap第一章初识
Bootstrap第一章 一.响应式web设计技术栈 和html5+css3互相配合与支持的: html5+css3 基本网页设计 html5中的viewport 提供可以配置视口的属性 css3媒体 ...
- bootstrap java_查看tomcat启动文件都干点啥---Bootstrap.java
在上一章查看tomcat启动文件都干点啥---catalina.bat,说了在catalina.bat中都走了什么流程,最重要的是,我们得出了如下这段命令: _EXECJAVA=start " ...
- bootstrap入门步骤
bootstrap入门 bootstrap其实是一个项目 或者叫做框架 是能制作自适应平台 一个页面可以自动根据显示设备的分辨率 调整显示方式 1.超大分辨率显示器1920 2.普通1024–1920 ...
- bootstrap的引入和使用
Bootstrap的下载 一. 使用Bootstrap第一步,先将生成环境的Bootstrap下载下来.然后将下载,然后引入到自己建好的当前目录中 二.点到起步中的基本模板 将看到的整段代码复制粘贴到 ...
- ExpRe[29] Windows下的“bootstrap”深度神秘过程
文章目录 概述 什么是bootstrap bootstrap第一步:全力连接github下载包 手动映射ip 下载`Q神秘` 下载`神秘` bootstrap第二步:使用`Q神秘`进行神秘 配置内核 ...
- Bootstrap栅格布局解析
文章目录 栅格布局 初始栅格 栅格布局源码 grid.less mixin中的grid.less clearfix.less 栅格布局源码分析 流体容器&固定容器公共样式 @grid-gutt ...
- python写前端代码_python前端学习之移动端和bootstrap
我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢 ...
- Bootstrap框架(一)
day57 参考:https://www.cnblogs.com/liwenzhou/p/8214637.html 下载:http://www.bootcss.com/ 选择用于生产环境的 Boo ...
最新文章
- 'This NSPersistentStoreCoordinator has no persistent stores 报错
- 为了一个科研idea,博士生们连冥想、巫毒仪式都用上了
- 如何清除Git中的本地工作目录? [重复]
- matplotlib plot绘图简介
- Postman Could not get any response
- 强推!十大顶级大数据可视化工具 | 程序员硬核评测
- 不属于html5表单元素的是,HTML5 表单元素
- 如何杀掉本地和远程NT系统进程
- 2.18比赛(T2,T3留坑)
- opencv 鱼眼矫正
- javascript在数组的开头推送元素[重复]
- java在线购物B2C商城源码 单用户商城源码(支持H5+APP+小程序)
- JQ树形菜单加表格混合使用:treeTable组件使用
- Firefox火狐浏览器插件大全
- 计算机怎么快捷截图桌面,电脑截屏的快捷键是什么
- Java编写个人所得税计算机的问题
- error hawk@0.10.2: The engine “node“ is incompatible with this module. Expected versi
- 编程匠艺:编写卓越的代码(第二版
- 【Windows11】Cuda和Cudnn详细安装教程
- SpringBoot+WebSocket+Vue整合实现在线聊天
热门文章
- AcWing 9. 分组背包问题(分组背包模板)
- 【介绍】GNES ——Pythonic的直观方式快速构建神经搜索框架
- qml设置Text中的文字居中(不是整个Text居中)
- 用 Access+Outlook 来采集信息
- 《Java 7程序设计入门经典》一1.10 另一种数据类型
- 201521123070 《JAVA程序设计》第8周学习总结
- 警告 初始化默认驱动器时出错“找不到运行 Active Directory Web 服务的默认服务器。”...
- 深入浅出JMS(一)——JMS简要
- 再探.NET的PE文件结构(安全篇)
- 随机抽样之蓄水池算法