[项目][准备1] Bootstrap体验

最新推荐文章于 2024-08-15 10:02:26 发布

luxin_xyz

最新推荐文章于 2024-08-15 10:02:26 发布

阅读量351

点赞数

分类专栏：大三上-软件工程文章标签：项目

本文链接：https://blog.csdn.net/luxin_xyz/article/details/52712491

版权

本文介绍了基于Bootstrap 3.3.7的学习路径，包括Bootstrap的基础组件如网格系统、排版、表格、表单、按钮和图片的实践。推荐通过菜鸟教程进行学习，并提供了Bootstrap可视化布局系统的体验建议。此外，文章还分享了如何结合Dreamweaver CS6进行在线可视化工具的使用，以创建一个简单的计算器页面，详细描述了从建立目录结构到编辑HTML的过程。

摘要由CSDN通过智能技术生成

学习参考

Bootstrap版本：3.3.7

可先按以下链接顺序简要学习，重点在跑其中的例子：

看完跑完之后，可打开这个链接：

Bootstrap 可视化布局系统

建议做如下体验：

体验网格系统
布局设置的数字是可以修改的
把所有能拖的东西都拖拖看看
点击下载，看一看生成的代码
瞎拖着玩……

以上链接均来自 菜鸟教程 ，该站还有后续教程，可根据具体需要学习：

Bootstrap 教程

额外的建议：

在线可视化工具可以搭配Dreamweaver CS6使用
使用在线可视化工具获取网格代码，获取控件代码，以及各种代码
使用Dreamweaver CS6编辑真实的html文件，粘贴获取的代码，进行细粒度的编辑
利用Dreamweaver CS6实时显示真实视图的功能，可以随时根据效果调整代码

实践示例

准备工作：

下载bootstrap-3.3.7-dist.zip并解压，提取下面目录结构需要的文件
建立如下方所示的目录结构

目录结构:

-prepare1
    -js
        bootstrap.min.js
    -css
        bootstrap.min.css
    index.html

完善index.html代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>计算器</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-xs-12 column">
            <div class="row clearfix">
                <div class="col-xs-6 column col-xs-offset-3">
                    <div class="jumbotron">
                        <div class="pull-left">
                            <h1><strong>计算器</strong></h1>
                        </div>
                        <p>
                        </p>
                        <div