文档章节

BootStrap

wytao1995
 wytao1995
发布于 09/19 01:57
字数 464
阅读 15
收藏 0

一、BootStrap

简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单

中文镜像网站:http://www.bootcss.com

用于开发响应式布局、移动设备优先的WEB项目

1、使用boot

    创建文件夹,在文件夹中创建js和css文件夹,把boot中的js和css文件,分别放入

 

二、全局CSS样式

 

按钮

1rem=16px

1、不同颜色的按钮

<h3>按钮相关样式</h3>
        <input type="button" value="普通按钮" class="btn">
        <input type="button" value="危险红色" class="btn btn-danger">
        <input type="button" value="成功绿色" class="btn btn-success">
        <input type="button" value="警告黄色" class="btn btn-warning">
        <input type="button" value="信息蓝色" class="btn btn-info">
        <input type="button" value="主要" class="btn btn-primary">
        <input type="button" value="次要" class="btn btn-secondary">
        <input type="button" value="深色" class="btn btn-dark">
        <input type="button" value="浅色" class="btn btn-light">

2、不同边框的按钮

<h3>不同边框的按钮</h3>
        <button class="btn btn-outline-danger">红色边框</button>
        <button class="btn btn-outline-success">绿色边框</button>
        <button class="btn btn-outline-warning">警告边框</button>

等等等。。。

3、不同按钮的大小

<h3>不同尺寸的按钮</h3>
        <button class="btn btn-danger btn-lg" >大按钮</button>
        <button class="btn btn-danger btn-sm">小按钮</button>
        <button class="btn btn-danger btn-block">块状按钮</button>

图片

<img src="banner1.png" class="img-thumbnail" alt="">//缩略图
        <img src="banner1.png" class="rounded" alt="">//圆角
        <img src="banner1.png" class="rounded-circle" alt="">圆角50%
        <img src="banner1.png" class="img-fluid" alt="">响应式图片,能缩放,不能缩小

 

文字

字体颜色:

text-danger/success/info/primary/warning..

字体粗细:

font-weight-bold/light/normal

文字对齐方式

text-left/right/center/justify

大小写/首字母大写

text-uppercase/lowercase/capitalize

字体大小 .h1~.h6

 

© 著作权归作者所有

上一篇: boot-组件
下一篇: 响应式布局
wytao1995
粉丝 1
博文 53
码字总数 33926
作品 0
六安
私信 提问
《前台框架BootStrap学习》系列技术文章整理收藏

《前台框架BootStrap学习》系列技术文章整理收藏 前台框架BootStrap学习系列整理了关于前台框架BootStrap方面的技术文章,一些实用的BootStrap使用示例,供大家学习BootStrap时参考 1CSS——...

开元中国2015
2015/06/22
218
0
最全的 Twitter Bootstrap 开发资源清单

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发。Bootstrap提供了优雅的HTML和CSS规范,它由动态CSS语言LESS写成,与CSS框架...

Jeky
2012/11/29
15.5K
48
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
445
0
bootstrap3教程

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...

harries
2015/09/24
269
0
可考虑在你下一个项目中使用的 50 个 Bootstrap 插件

可考虑在你下一个项目中使用的 50 个 Bootstrap 插件 作者 jopen 2014-11-12 09:54:16 阅读目录 1. Bootstrap Multiselect 2. Bootstrap Dialog 3. Bootstrap Confirmation 4. Bootstrap Ta......

~少司命~
2015/08/17
3.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

linux 磁盘不足异常

linux 报 No space left on device 异常 ,则是磁盘不足 ,导致异常 运行 df -h 命令查询磁盘使用率,如果有100%,则查找目录大日志文件删除 1.磁盘不足导致系统应用写入文件失败,如系统日志...

zaolonglei
17分钟前
1
0
即学即用的 30 段 Python 实用代码

☞ 分享:最全最新的Python学习大礼包 ☜ 点击查看 编译:Pita & AI开发者,作者:Fatos Morina Python是目前最流行的语言之一,它在数据科学、机器学习、web开发、脚本编写、自动化方面被许...

Object_Man
18分钟前
1
0
The server time zone value 'EDT' is unrecognized or represents more than one time zone.

2019-10-14 18:07:43.714 ERROR 74363 --- [Druid-ConnectionPool-Create-1855026648] com.alibaba.druid.pool.DruidDataSource : create connection SQLException, url: jdbc:mysql://10.30......

yizhichao
31分钟前
8
0
html加载顺序以及影响页面二次渲染额的因素

本文转载于:专业的前端网站➱html加载顺序以及影响页面二次渲染额的因素 浏览器请求发往服务器以后,返回HTML页面,页面内容开始渲染,具体的执行顺序为: 1. 浏览器开始载入html代码,发现<...

前端老手
34分钟前
9
0
BeginnersBook JSP、JSTL、Servlet 教程

来源:ApacheCN BeginnersBook 翻译项目 译者:飞龙 协议:CC BY-NC-SA 4.0 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 请您勇敢地去翻译和改进翻译。虽然我们追求卓越,但我们并...

ApacheCN_飞龙
46分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部