|
学习来源：https://www.bilibili.com/video/BV1Et411z7xz 一、bootstrap下载 进入https://www./ 点击bootstrap3中文文档，点击下载用于生产环境的bootstrap。 二、bootstrap导入 新建文件夹，命名为bsdemo，把文件夹拖到vscode. 把bootstrap拖到bsdemo，新建HTML文件夹，新建index.html文件。 在HTML输入doc回车可以得到一个简单的HTML基本样式。 什么是相对路径？ ../上一层 什么是绝对路径？ html中输入link回车，可以选择link css等。 scr回车，选择script。 下载jquery，把代码另存为到bsdemo。 html的注释：<!-- --> 1、创建项目的文件夹 2、把项目的文件夹导入到vscode 3、把bootstrap拖入项目文件夹 4、新建HTML文件夹 5、创建index.html 6、给index.html导入基本样式 7、导入bootstrap的css 8、导入bootstrap的js 9、下载jquery并导入 基本代码： <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap-theme.css"> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"> <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script src="../jquery.js"></script> </head> <body> <div class="container"> <div class="row"> <div class = "col-md-12"> <p class="text-danger"><!--字体颜色为红--> www.hao123.com</p> </div> </div> </div> </body> </html> 三、bootstrap的结构样式 一行最多12列。 代码： <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap-theme.css"> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"> <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script src="../jquery.js"></script> </head> <body> <div> <div class="container"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> <div class="row"> <div class="col-md-3">4</div> <div class="col-md-9">12</div> </div> </div> </div> </body> </html> 四、列中新增子行 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap-theme.css"> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"> <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script src="../jquery.js"></script> </head> <body> <div> <div class="container"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> <div class="row"> <div class="col-md-3"> <div class="row"> <div class="col-md-6">a1</div> <div class="col-md-6">a2</div> </div> <div class="row"> <div class="col-md-6">a3</div> <div class="col-md-6">a4</div> </div> </div> <div class="col-md-9">12</div> </div> </div> </div> </body> </html> 五、bootstrap列宽超过12将会另起一行 代码： <div class="container"> <div class="row"> <div class="col-md-6">1</div> <div class="col-md-8">2</div> <div class="col-md-4">3</div> </div> 六、针对不同屏幕bootstrap做自适应 代码： <div class="container"> <div class="row"> <div class="col-md-2 col-xs-12">1</div> <div class="col-md-2 col-xs-6">2</div>另起一行 <div class="col-md-2 col-xs-6">3</div>同在一行 </div> 大屏幕显示在同一行，小屏幕则分行。 七、重置行高度 代码： <div> <div class="container"> <div class="row"> <div class="col-md-6" style="height: 100px;">1</div> <div class="col-md-4">2</div> <div class="clearfix"></div>自动换行 <div class="col-md-4">3</div> </div> </div> </div> 八、bootstrap移动offset列的位置 代码： <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-1" >1</div> 占据多1个位置 <div class="col-md-4 col-md-offset-5">2</div> 占据多5个位置，超过12个位置会换行 </div> </div> 九、微调列的位置 代码： <div> <div class="container"> <div class="row"> <div class="col-md-6 col-md-push-4" >1</div> 推4个位置 <div class="col-md-4 col-md-pull-4">2</div> 拉4个位置 </div> </div> </div> 十、使用small作为副标题 代码： <div> <div class="container"> <div class="row"> <h1>I`m title<small>abc</small></h1> <h1>hello</h1> </div> </div> </div> 十一、bootstrap中改变行高和字体 <body style="line-height: 40px;font-size:30px;"> <div> <div class="container"> <div class="col-md-12"> <p>123</p> <p>123</p> <p>123</p> </div> </div> </div> </body> 十二、bootstrap段落添加lead <p class="lead"></p>p标签里面加lrad。 十三、bootstrap文字操作mark、del、s、ins p标签中把需要高亮的文字放到<mark>标签中即可高亮。 放到<del>和<s>标签中即可显示被划掉的效果。 十四、bootstrap文字居中 <div class="col-md-12 text-center">居中</div> text-right右边 text-left左边。 十五、bootstrap文字斜体小号着重标签的 文字放到<em>标签中显示斜体。 文字放到<small>标签中显示斜体。 文字放到<strong>标签中显示粗体。 十六、无序列表和有序列表 <div class="container"> <div class="row"> <ul> <li>a</li> <li>b</li> c <ul> <li>1</li> <li>2</li> </ul> </ul> </div> </div> ol有序号列表，ul无序列表。 十七、无样式的无序列表 <ul class="list-unstyled"> 十八、带描述的短语列表 <div class="container"> <div class="row"> <dl> <dt>123</dt>带加粗效果的描述 <dd>123</dd> </dl> </div> </div> 十九、水平短语列表 <div class="container"> <div class="row"> <dl class="dl-horizontal">两个123放在一行 <dt>123</dt> <dd>123</dd> </dl> </div> </div> 二十、代码样式效果 <div class="container"> <div class="row"> <p> 复制使用<kbd>ctrl+c</kbd> 换行使用<code><</code>br/<code>></code> </p> </div> </div> 二十一、创建表格 <div class="container"> <div class="row"> <div class="col-md-12"> <table class="table table-striped"> <tr> <td>id</td> <td>content</td> </tr> <tr> <td>1</td> <td>pig</td> </tr> <tr> <td>2</td> <td>dog</td> </tr> <tr> <td>3</td> <td>cat</td> </tr> </table> </div> </div> </div> 二十二、表格hover效果，给表格添加边框 class空格后可以增加样式 <div class="row"> <div class="col-md-12"> <table class="table table-hover table-bordered"> <tr> <td>id</td> <td>content</td> </tr> <tr> <td>1</td> <td>pig</td> </tr> <tr> <td>2</td> <td>dog</td> </tr> <tr> <td>3</td> <td>cat</td> </tr> </table> </div> </div> </div> 二十三、给不同行添加背景色，收缩表格 <div class="container"> <div class="row"> <div class="col-md-12"> <table class="table table-hover table-bordered table-condensed">收缩 <tr class="active"> <td>id</td> <td>content</td> </tr> <tr class="success"> <td>1</td> <td>pig</td> </tr> <tr class="danger"> <td>2</td> <td>dog</td> </tr> <tr> <td>3</td> <td>cat</td> </tr> </table> </div> </div> </div> 二十四、table水平相应式布局 <div class="container"> <div class="row"> <div class="col-md-12" table-responsive>手机端可以上下左右拖动 <table class="table table-hover table-bordered"> <tr class="active"> <td>id</td> <td>content</td> </tr> <tr class="success"> <td>1</td> <td>pig</td> </tr> <tr class="danger"> <td>2</td> <td>dog</td> </tr> <tr> <td>3</td> <td>cat</td> </tr> </table> </div> </div> </div> 二十五、创建form表单 <div class="container"> <div class="row"> <div class="col-md-12"> <form style="width: 300px;"> <div class="form-group"> <label for="name">name:</label> <input type="text" id="name" name="name" class="form-control"> </div> <div class="form-group"> <label for="pw">name:</label> <input type="text" id="pw" name="pw" class="form-control"> </div> <div class="form-group"> <label for="content" >content:</label> <textarea name="content" id="content" ></textarea> <button>提交</button> <!-- style="float:left"居左侧样式 --> </div> </form> </div> </div> </div> |
|
|
来自： 戈安御凝 > 《python flask》
