首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >带自己设计的Bootstrap

带自己设计的Bootstrap
EN

Stack Overflow用户
提问于 2013-03-31 08:40:58
回答 1查看 78关注 0票数 1

我想使用Bootstrap为我的网站-特别是我的管理后端。在开始之前,我想问几个问题。

我如何理解Bootstrap是什么?这是不是有点像Webdesign工具的集合,或者仅仅是每个html页面的一个UI?我是否需要一个特殊的HTML结构,或者我可以在我自己的HTML结构上使用它?

如果能有一些很好的教程和技巧,也许还有例子,我会很高兴的。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-03-31 09:26:06

Twitter bootstrap是一个帮助你的页面更加流畅和响应性的库,它有内置的CSS和javascript来启动你的设计,只需要包括bootstrap类,函数。

它不是一个工具,您可以下载源代码,您可以看到定义这些类和函数的.css和.js文件。

你不需要特殊的HTML结构,你只需要把bootstrap css包含在head标签中,因为twitter-bootstrap使用jQuery,所以把jQuery库和bootstrap jQuery文件包含在脚本标签中,然后放入你的body标签中,如下所示:

代码语言:javascript
运行
AI代码解释
复制
<!DOCTYPE html>
    <html>
        <head>
            <title>...</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        </head>
        <body>
            <script src="http://code.jquery.com/jquery.js"></script>
            <script src="js/bootstrap.min.js"></script>
        </body>
 </html>

bootstrap getting started开始...

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15727830

复制
相关文章
bootstrap 表格 带边框
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
用户5760343
2022/01/10
1.1K0
bootstrap 表格 带边框
bootstrap select 带颜色
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-select.css" r
用户5760343
2019/07/08
1.6K0
Bootstrap项目实训干货:设计带修改和删除的图书表格
# 一、实验目标 写一个带修改和删除的表格。页面如下: # 二、环境依赖 采用bootstrap框架来实现,依赖的版本为3.3.7。 我们可以直接引用cdn的资源,资源地址如下: 修改和删除按钮会弹出模态框,需要依赖下列两个js: **环境准备** 平台已经提供了实验的html、css文件。 # 三、实验知识 点击按钮弹出模态框,需要用到data-toggle和data-target。 data-target表示要弹出的模态框的id,每个模态框都有自己的id。 # 四、实验步骤: 打开src/main/
企鹅号小编
2018/02/05
1.2K0
Bootstrap项目实训干货:设计带修改和删除的图书表格
Bootstrap学习笔记上(带源码)
☑ 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
牧云云
2022/03/11
3.9K0
Bootstrap学习笔记上(带源码)
bootstrap 面板 带表格 常用样式
<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 这是一个基本的面板 </div> <table class="table"> <th>产品</th><th>价格 </th> <tr><td>产品 A</td><td>200</td></tr> <tr><td>产品 B</td><td>400</td></tr> </table> </div> <div class="panel panel-default"> <div class="panel-heading">面板标题</div> <table class="table"> <th>产品</th><th>价格 </th> <tr><td>产品 A</td><td>200</td></tr> <tr><td>产品 B</td><td>400</td></tr> </table> </div>
用户5760343
2019/07/05
1.1K0
bootstrap  面板 带表格 常用样式
Bootstrap的表单设计器
如果是内部系统或是自己需要写个简单点的页面,可以直接使用Twitter的Bootstrap,而这个表单器也是非常好用,直接拖拽,设置属性,得到一个很漂亮的表单。
meteoric
2018/11/16
2.1K0
bootstrap 警告框 提示框 带关闭 常用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="alert alert-success"> <a class="close" href="#" data-dismiss="alert">×</a> <p>显示了警告框</p> </div> <div class="alert alert-danger"> <a class="close" href="#" data-dismiss="alert">×</a> <p>显示了警告框</p> </div> <div class="alert alert-info"> <a class="close" href="#" data-dismiss="alert">×</a> <p>显示了警告框</p> </div> </div>
用户5760343
2019/07/05
1.9K0
bootstrap3 轮播图片 传送带 carousel
('.carousel').carousel({ interval: 8000 // 8 seconds vs. default 5 }); });
用户5760343
2019/10/14
1.6K0
bootstrap3  轮播图片 传送带 carousel
利用BootStrap Table插件实现自己的弹出框分页。
参考链接1:     官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/         开始使用:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/         文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/     参考链接2:https://www.cnblogs.com/wlandwl/p/bootstrap_table.html
别先生
2018/12/27
1.3K0
Bootstrap响应式图表设计
在Bootstrap框架中并没有提供完整的响应式图表功能,不过可以引入强大的、基于JavaScript的、完全开源的第三方图表插件,并基于Bootstrap框架良好的兼容性来整合这些第三方插件,最终设计出性能优越的响应式图表 为了实现基于Bootstrap框架的响应式图表的设计,引用了Bootstrap框架、jQuery框架和ECharts插件所需要的脚本文件、样式文件和资源文件,并自定义了相关样式文件和资源文件
别团等shy哥发育
2023/02/25
1.6K0
Bootstrap响应式图表设计
分享12款最佳的Bootstrap设计工具
设计师总会渴望有一些新奇有趣的设计工具来提高工作效率,而Bootstrap就是您的不二选择。2013年Bootstrap得到了广泛普及,它 是开发者较为常用的框架之一,本文我们将分享12款最佳的Boo
wangxl
2018/03/08
1.8K0
分享12款最佳的Bootstrap设计工具
bootstrap table x-editable select2——带图标的选择
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/78149202
hotqin888
2018/09/11
4.2K0
bootstrap table x-editable select2——带图标的选择
解读bootstrap v4 sass设计
IMWeb前端团队
2017/12/28
3K0
解读bootstrap v4 sass设计
解读bootstrap v4 sass设计
首先关于bootstrap从v3的less转到v4的sass的十万个为什么,这里暂且不表(计划会另起一篇文章对比less,sass,postcss)。
IMWeb前端团队
2019/12/04
2.4K0
解读bootstrap v4 sass设计
使用BOOTSTRAP设计评论过滤筛选
电子商务网站的商品评论,需要设置各种评论的类别,筛选出不同种类的评论,能直观的看出商品的口碑。如何设计评论过滤筛选,我们可以一起学习一下。 目标 使用html、css、bootstrap3设计一个
企鹅号小编
2018/01/03
8920
使用BOOTSTRAP设计评论过滤筛选
带妹入坑,她该怎样提高自己的编程能力?
老读者都知道了,今年我成功带妹入坑。因为她自己不知道喜欢什么专业,也没有目标和方向,于是作为有经验的前辈,我就给她指了一条“明路”——计算机编程。
沉默王二
2020/11/03
4060
带妹入坑,她该怎样提高自己的编程能力?
由浅入深 定制Bootstrap开发自己网站的六种方法
对于Bootstrap这个CSS框架,很多程序员持鄙视的态度,就如鄙视jQuery一般。诚然,就算不用这个框架,而是纯手写,或者借助JS框架的模板,一样可以写出一套页面,至于页面的精良程度、是否可二次开发、是否主流浏览器全兼容、是否可复用、可扩展、那就看开发者的个人能力了——如果一些人拿着公司的高额薪水或者甲方的高额酬金,却干着一锤子的买卖,代码不可复用,不可扩展,不可二次开发,浏览器不全兼容,他只是非常快速的胡七八凑了一套页面,应付到上线,然后潇洒的鄙视一下Bootstrap,我只能对这种人说俩字:呵呵。
PM吃瓜
2019/08/12
1.7K0
自己平时用到的设计模式总结
作为对象的创建模式,单例模式确保其某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类。单例模式有以下特点:
小勇DW3
2018/09/29
6790
没人带的设计师,如何自我成长?
做某件事情时,不受外界因素影响,不局限于眼前利益,而为了自己长期目标和获得成就感,而自我驱动完成的方式。
用户1730674
2019/03/06
8930
没人带的设计师,如何自我成长?
Bootstrap Studio for mac/win(网站设计制作工具)
Bootstrap Studio是一款Bootstrap框架创建响应式网站的一款网页设计工具,主要用于设计和原型化网站,可以通过这款软件直接制作HTML文档,从而将制作的内容直接发布到网站中,帮助用快速创建响应式网站,您可以在软件上编辑HTML,也可以编辑CSS,提供的编程语言是非常多的,无论是Java还是JavaScript都是可以在软件上建立网页内容的,软件配备了大量内置组件,您可以通过拖放来组装响应式网页。
捧着风的少女
2022/11/13
1.3K0
Bootstrap Studio for mac/win(网站设计制作工具)

相似问题

带ArrayList帮助的自己设计的类!@!

20

在django和bootstrap中设计我自己的列表

11

带Bootstrap的Yii

21

Bootstrap设计查询

121

Bootstrap设计思想

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档