Bootstrap是一个前端框架，可帮助开发人员启动Web开发程序。
Bootstrap网格系统可以创建一个移动友好和响应式的网站。
Bootstrap封装了许多有用的组件，可以很容易地在网站项目中使用。
Bootstrap 是基于 HTML、CSS、JavaScript 的。
打开代码编辑器并创建一个新的HTML文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html> |
在页面底部包含JavaScript文件 - 在关闭<body>标签（即</body>）之前，以提高网页的性能。
注意css和Javascript的相对路径。
附上来自菜鸟联盟提供的几个链接:
网格系统允许我们正确地布局我们网站的内容。
它将屏幕划分为多个行和列，可用于创建各种类型的布局。
一旦我们定义了行和列，我们可以在其中放置HTML元素。
Bootstrap的网格系统将屏幕划分为列 - 每行最多12个。
列宽根据屏幕的大小而变化。
因此，Bootstrap的网格系统是响应式的，因为当浏览器窗口的大小改变时，列动态地调整大小。
Bootstrap也有很多非常好看的button 按钮标签可以使用,比起HTML自定义的按钮好看很多。
用法: <button class="btn btn-XX">name </button>
按钮有各种颜色选项：
- btn-default为白色
- btn-primary为深蓝色
- btn-success为绿色
- btn-info为浅蓝色
- btn-warning为橙色
- btn-danger为红色
各种尺寸：
- btn-lg用于大按钮
- btn-sm用于小按钮
- btn-xs用于超小的按钮
还有一些辅助类的按钮可用：
- btn-block将使按钮跨越整个网格
- active将使按钮看起来像它当前点击
- disabled将使按钮无法单击并显示渐变色。
下面是在站点或 app 中使用图标的通用语法：
<i class="icon_class_name"></i>
引用链接： <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
一个比较实用的东东，可以写在类似于按钮里面。下面附一段代码和其效果图。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <html> <head> <title>try</title> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.min.js"></script> <div class="col-xs-4"> <button class="btn btn-block btn-danger active"><i class="glyphicon glyphicon-heart"> Like</i></button> <button class="btn btn-block btn-success"><i class="glyphicon glyphicon-tree-deciduous"> 123</i></button> <button class="btn btn-block btn-warning"><i class="glyphicon glyphicon-repeat"> Refresh</i></button> <button class="btn btn-block btn-info"><i class="glyphicon glyphicon-search"> Search</i></button> </div> </body> </html> |
关于Bootstrap，还有好多好多，慢慢探索吧。(oﾟ▽ﾟ)o
Post a new comment