Bootstrap前端框架

最新推荐文章于 2022-10-16 18:13:30 发布

小萝莉_Lolita

最新推荐文章于 2022-10-16 18:13:30 发布

阅读量909

点赞数

分类专栏： Bootstrap 文章标签： bootstrap html css

本文链接：https://blog.csdn.net/MDreamlove/article/details/74859633

版权

Bootstrap 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Bootstrap

前端小白，关于前端的都学学，有砖轻拍~

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是一个基于 HTML、CSS、JavaScript 的开源框架，它简洁灵活，可用于快速、简单地构建基于PC及移动端设备的Web页面需求。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。 Bootstrap最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC端，PAD以及手机移动端的页面访问。

特点

跨设备、跨浏览器：可以兼容所有现代浏览器，包括比较诟病的IE7、8
响应式布局：支持PC端各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显示
提供全面的开发组件：导航、标签、工具条、按钮等一系列组件，方便开发者使用
内置jQuery插件：方便开发者实现Web中各种常规特效
支持HTML5、CSS3
支持LESS动态样式

Bootstrap结构

主要分为三大核心目录：CSS(样式)、js(脚本)、fonts(字体).

css目录中有四个css后缀的文件，其中包含min字样的是压缩版本，一般使用这个；不包含的属于没有压缩的；map后缀的文件则是CSS源码映射表，在一些特定的浏览器工具中使用。
JS目录包含两个文件，是未压缩和压缩的JS文件
fonts目录中包含了不同后缀的字体文件

创建第一个页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>BootStrap Test</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="margin:50px;">
<p>Bootstrap框架</p>
<samp>This is output.</samp>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>

页面布局

1.有序类表/无序列表：成为导航栏，只需引入一下类

<ul class="list-unstyled list-inline">
    <li>Bootstrap框架</li>
    <li>Bootstrap框架</li>
    <li>Bootstrap框架</li>
    <li>Bootstrap框架</li>
</ul>

2.页面上的代码片/按键提示

<code>&lt;section&gt;</code>
press <kbd>ctrl+,</kbd>

表格

1.基本表格样式：引入类class=”table”即可

<table class="table">

2.条纹状表格：让tbody里的行产生一行隔一行加单色背景的效果

<table class="table table-striped">

3.带边框的表格：

<table class="table table-bordered">

4.悬停鼠标

<table class="table table-hover">

5.状态类：可以单独设置每一行的背景样式

<tr class="active">
<tr class="success">
<tr class="info">
<tr class="warning">
<tr class="danger">

6.隐藏某一行

<tr class="sr-only">

7.响应式表格：表格父元素设置响应式，小于768px时出现边框

<body class="table-responsive">

按钮

1.可做为按钮使用的标签或元素—>转化为普通按钮

<a href="###" class="btn btn-default">Link</a>
<input type="button" class="btn btn-default" value="input">
<button class="btn btn-default">Button</button>

*1.虽然按钮类可以应用到a和button元素上，但是，导航和导航条组件只支持button元素
2.如果a元素被作为按钮使用，并用于在当前页面出发某些功能，而不是用于链接其他页面或者当前页面中的其他部分，那么，务必设置role=”button”属性
3.跨浏览器展现，强烈建议尽可能使用button元素来获得在各个浏览器上获得相匹配的绘制效果*

2.预定义样式

btn-default 默认样式
btn-success 成功样式
btn-info 一般信息样式
btn-warning 警告样式
btn-danger 危险样式
btn-primary 首选样式
btn-link 链接样式

<button class="btn btn-info">Button</button>
<button class="btn btn-success">Button</button>

2.尺寸大小：从大到小

<button class="btn btn-success btn-lg">Button</button>
<button class="btn btn-success">Button</button>
<button class="btn btn-success btn-sm">Button</button>
<button class="btn btn-success btn-xs">Button</button>

3.块级按钮：可以换行

<button class="btn btn-info btn-block">Button</button>

4.激活按钮

<button class="btn btn-info active">Button</button>

6.禁用按钮

<button class="btn btn-info disabled">Button</button>

小萝莉_Lolita

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap前端框架

Bootstrap前端小白，关于前端的都学学，有砖轻拍~ Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是一个基于 HTML、CSS、JavaScript 的开源框架，它简洁灵活，可用于快速、简单地构建基于PC及移动端设备的Web页面需求。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。 Bootstrap最为
复制链接

扫一扫

专栏目录