bootstrap框架学习(keep update)

最新推荐文章于 2024-01-05 10:00:20 发布

租房请下载：房东直租APP

最新推荐文章于 2024-01-05 10:00:20 发布

阅读量747

点赞数

分类专栏：我的框架文章标签： bootstrap 响应式布局框架文件

本文链接：https://blog.csdn.net/AinUser/article/details/73159328

版权

我的框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[html]view plaincopy

简介:
bootstrap是最受欢迎的html，css和js框架，用于开发响应式布局，移动设备优先的web项目
bootstrap3在bootstrap2的基础之上，重写了框架，boostrap是移动设备优先的
参考bootstrap中文网站:
http://v3.bootcss.com/getting-started/
第一个HelloWord:
bootstrap中文网中起步类别中下载使用于开发生产环境的bootstrap文件

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Bootstrap Template</title>
    <%--引入css文件--%>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <p>this is the first helloworld</p>

    <%--引入js文件--%>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

注意:
引入文件参照官网上面的例子和要求
主要可以分为三部分：
（
bootstrap.min.css/bootstrap.css
jquery.min.js/jquery.js
bootstrap.min.js/bootstrap.js
）
一般呢，引入外部文件的顺序也是按照我上面的顺序进行引入的(jquery.js必须在bootstrap.js之前引入)
html5文档类型
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置

<!DOCTYPE html>
<html lang="zh-CN">
...
<html>

下拉菜单

按钮组

输入框组

表单:

表单(行)

表单(并列)

input输入框校验属性:

input禁用和只读:

单选多选(default)

单选多选(行)

单选多选(无文本)

下拉列表

close按钮:

图片显示效果:

显示和隐藏:

居中:

导航:

路径导航:

徽章:

可关闭warning:

进度条:

bootstrap总结(特点):

自我总结:

①:主要依靠class="内定的类别样式" role="内定类别"等来控制界面样式/布局问题

②:12栏栅格系统来布局界面

③:界面的自适应以及响应式布局

租房请下载：房东直租APP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap框架学习(keep update)

[html] view plain copy首先呢，就需要引入bootstrap框架的几个关键的外部文件我们可以参照官网上面的例子和要求主要可以分为三部分：（bootstrap.min.css/bootstrap.css jquery.min.js/jquery.js bootstrap.min.j
复制链接

扫一扫