当前位置: 开发笔记 > 前端 > 正文

第九篇bootstrap实例

作者：IHH_MCWONG_142 | 来源：互联网 | 2023-09-17 17:09

1bootstrap的常用样式 Title

1 bootstrap的常用样式

"en">

"UTF-8">

"stylesheet" href="dist/css/bootstrap.css">

hello world

hello world

class="container">

class="row">

class="col-md-8 col-md-offset-2">
"1"class="table table-striped table-hover table-bordered">

class="success">

class="danger">

序号	姓名	年龄	部门
1	张三	23	销售
2	李四	23	销售
3	王五	23	销售

class="row">

class="col-md-8 col-md-offset-2">

class="form-group">
for="exampleInputEmail1">Email address
"email" class="form-control" id="exampleInputEmail1" placeholder="Email">

class="form-group">
for="exampleInputPassword1">Password
"password" class="form-control" id="exampleInputPassword1" placeholder="Password">

class="form-group">
for="exampleInputFile">File input
"file" id="exampleInputFile">

class="help-block">Example block-level help text here.

class="checkbox">

"checkbox"> Check me out

"">

class="form-group">
for="user">用户名
"text" class="form-control" id="user">

class="form-group">
for="pwd">密码
"password" class="form-control" id="pwd">

class="form-group">

class="row">

class="col-md-6">
<select class="form-control">

select>

class="row">

class="col-md-2 pull-right">"submit" class="form-control">

class="col-md-8 col-md-offset-2">

class="row">

按钮

class="btn btn-warning btn-lg" type="button" value="button">
class="glyphicon glyphicon-user">  
class="glyphicon glyphicon-shopping-cart">

View Code

2 bootstrap的栅格系统

"en">

"UTF-8">

"stylesheet" href="dist/css/bootstrap.css">

class="container-fluid">

class="row">

class="col-md-1">col-md-1

class="row">

class="col-md-6">col-md-1

class="row">

class="col-md-9">col-md-1

class="col-md-3">col-md-1

class="row">

class="col-md-6 col-sm-9">col-md-6

class="col-md-6 col-sm-3">col-md-6

列偏移

class="row">

class="col-md-4 col-md-offset-3">col-md-4

列嵌套

class="row">

class="col-md-6">

class="row">

class="col-md-6">col-md-6

列排序

class="row">

class="col-md-4 col-md-push-2">col-md-4

class="row">

class="col-md-4 col-md-push-4">col-md-4

class="col-md-4 col-md-pull-4">col-md-4(2)

class="row">

class="col-md-4 pull-right col-md-pull-2">col-md-4

View Code

3 基于bootstrap的页面

技术：导航条，面板，表格，分页，模态框

"en">

"UTF-8">

"stylesheet" href="dist/css/bootstrap.css">

class="navbar navbar-default">

class="container-fluid">

class="navbar-header">

class="navbar-brand" href="#">Brand

class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

nav navbar-nav

class="active">"#">Link class="sr-only">(current)

"#">Link

class="dropdown">
"#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown class="caret">
- "#">Action
- "#">Another action
- "#">Something else here
- "separator" class="divider">
- "#">Separated link
- "separator" class="divider">
- "#">One more separated link

class="navbar-form navbar-left">

class="form-group">
"text" class="form-control" placeholder="Search">

nav navbar-nav navbar-right

"#">Link

class="dropdown">
"#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown class="caret">
- "#">Action
- "#">Another action
- "#">Something else here
- "separator" class="divider">
- "#">Separated link

class="container">

class="row">

class="col-md-2">

class="panel panel-primary">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="panel panel-info">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="panel panel-success">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="col-md-10">

class="row">

class="jumbotron">
Hello, world!

...

class="btn btn-primary btn-lg" href="#" role="button">Learn more

class="col-md-8 col-md-offset-2">

"1"class="table table-striped table-hover table-bordered">

class="success">

class="danger">

序号	姓名	年龄	部门
1	张三	23	销售
2	李四	23	销售
3	王五	23	销售

class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

class="modal-dialog" role="document">

class="modal-content">

class="modal-header">

class="modal-title" id="myModalLabel">Modal title

class="modal-body">

class="form-group">
for="exampleInputEmail1">Email address
"email" class="form-control" id="exampleInputEmail1"
placeholder="Email">

class="form-group">
for="exampleInputPassword1">Password
"password" class="form-control" id="exampleInputPassword1"
placeholder="Password">

class="form-group">
for="exampleInputFile">File input
"file" id="exampleInputFile">

class="help-block">Example block-level help text here.

class="checkbox">

"checkbox"> Check me out

class="modal-footer">

View Code

4 表格示例

"en">

"UTF-8">

"stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
"stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

class="navbar navbar-default">

class="container-fluid">

class="navbar-header">

class="navbar-brand" href="#">Brand

class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

nav navbar-nav

class="active">"#">Link class="sr-only">(current)

"#">Link

class="dropdown">
"#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown class="caret">
- "#">Action
- "#">Another action
- "#">Something else here
- "separator" class="divider">
- "#">Separated link
- "separator" class="divider">
- "#">One more separated link

class="navbar-form navbar-left">

class="form-group">
"text" class="form-control" placeholder="Search">

nav navbar-nav navbar-right

"#">Link

class="dropdown">
"#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown class="caret">
- "#">Action
- "#">Another action
- "#">Something else here
- "separator" class="divider">
- "#">Separated link

class="container">

class="row">

class="col-md-3">

class="panel panel-primary">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="panel panel-info">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="panel panel-success">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="col-md-9">

class="table table-bordered table-striped">

class="tbody">

序号	姓名	年龄	部门
1	张三	23	销售部
2	李四	23	销售部
3	王五	23	销售部

class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

class="modal-dialog" role="document">

class="modal-content">

class="modal-header">

class="modal-title" id="myModalLabel">Modal title

class="modal-body">

class="form-group">
for="name">姓名
"text" class="form-control" id="name"
placeholder="Name">

class="form-group">
for="age">年龄
"text" class="form-control" id="age"
placeholder="Age">

class="form-group">
for="dep">部门
<select name="" class="form-control" id="dep">

select>

class="modal-footer">

View Code

5 轮播图

"en">

"UTF-8">

class="outer">

img

"">"https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa71/c3196f74/cr/s/q.jpg" alt="">

class="hide">"">"https://img12.360buyimg.com/pop/s590x470_jfs/t1/178599/8/1142/28979/6087858aE1679d862/173e0cfa2612b705.jpg.webp" alt="">

class="hide">"">"https://imgcps.jd.com/ling4/6038430/5Lqs5Lic5aW954mp57K-6YCJ/MuS7tjjmipgz5Lu2N-aKmA/p-5bd8253082acdd181d02fa42/9ea6716c/cr/s/q.jpg" alt="">

class="hide">"">"https://img12.360buyimg.com/pop/s1180x940_jfs/t1/174771/34/8431/98985/6095eaa2E8b8b4847/044f1b6318db4a9f.jpg.webp" alt="">

class="hide">"">"https://img11.360buyimg.com/pop/s1180x940_jfs/t1/180648/29/4209/88436/609f7547Ec7b73259/74a4d25e8d614173.jpg.webp" alt="">

num

class="current">

btn

class="left_btn"> <

class="right_btn"> >

View Code

作者：华王

博客：https://www.cnblogs.com/huahuawang/

bootstrap

推荐阅读

bootstrap
Netty拆包粘包问题解决 —— 特殊结束符

本文介绍了解决Netty拆包粘包问题的一种方法——使用特殊结束符。在通讯过程中，客户端和服务器协商定义一个特殊的分隔符号，只要没有发送分隔符号，就代表一条数据没有结束。文章还提供了服务端的示例代码。 ... [详细]

蜡笔小新 2023-12-14 18:02:45
jquery
高校天文共享平台开发过程中的思考与规划

本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面，并总结了项目存在的问题，如前后端未分离、代码混乱等。作者表示希望通过记录和规划，能够理清思路，进一步完善该平台。 ... [详细]

蜡笔小新 2023-12-13 18:08:58
bootstrap
Netty源代码分析服务器端启动ServerBootstrap初始化

本文主要分析了Netty源代码中服务器端启动的过程，包括ServerBootstrap的初始化和相关参数的设置。通过分析NioEventLoopGroup、NioServerSocketChannel、ChannelOption.SO_BACKLOG等关键组件和选项的作用，深入理解Netty服务器端的启动过程。同时，还介绍了LoggingHandler的作用和使用方法，帮助读者更好地理解Netty源代码。 ... [详细]

蜡笔小新 2023-12-10 15:42:28
bootstrap
ng2bootstrapprimeNG

http:valor-software.comng2-bootstraphttps:www.primefaces.orgprimeng#autocomplete转载于:https: ... [详细]

蜡笔小新 2023-12-09 20:57:51
bootstrap
bootstrapselect设置container之后，选择完之后options不隐藏？

本文讨论了使用bootstrapselect插件设置container后，选择完选项后options不隐藏的问题，给出了解决方法，并提供了相应的jsfiddle链接进行演示。 ... [详细]

蜡笔小新 2023-12-09 17:18:48
overflow
org.gwtbootstrap3.client.ui.Icon.addDomHandler()方法的使用及代码示例

本文整理了Java中org.gwtbootstrap3.client.ui.Icon.addDomHandler()方法的一些代码示例，展示了Icon.ad ... [详细]

蜡笔小新 2023-10-17 22:46:43
bootstrap
bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...

查询单个functionquery(id){$.ajax({url:smallproductServlet,async:true,type:POST,data:{typ ... [详细]

蜡笔小新 2023-10-17 19:40:17
bootstrap
Shell脚本自动发布springboot到docker容器中

1.脚本功能1）自动替换jar包中的配置文件。2）自动备份老版本的Jar包3）自动判断是初次启动还是更新服务2.脚本准备进入ho ... [详细]

蜡笔小新 2023-10-17 19:08:29
bootstrap
javascript – RTL布局中的bootstrap datepicker无法正常工作

RTL布局中的bootstrapdatepicker工作不正常,我正在使用这个bootstrapdatepickerhttp:bootstrap-datepicker.readth ... [详细]

蜡笔小新 2023-10-17 18:57:35
bootstrap
初识java关于JDK、JRE、JVM 了解一下

初识java关于JDK、JRE、JVM 了解一下 ... [详细]

蜡笔小新 2023-10-17 17:17:17
正则
PRML读书会第十四章 Combining Models（committees，Boosting，AdaBoost，决策树，条件混合模型）...

主讲人网神（新浪微博:豆角茄子麻酱凉面）网神(66707180)18:57:18大家好，今天我们讲一下第14章combiningmodel ... [详细]

蜡笔小新 2023-10-17 17:04:24
bootstrap
Elastic Search 7.0 添加数据提示提示503错误

ElasticSearch成功安装完毕。测试数据添加出现{ error:{ root_cause ... [详细]

蜡笔小新 2023-10-17 15:46:32
bootstrap
基于SpringBoot打造在线教育系统（6）– 二级分类模块UI篇

这一节来做二级分类，为了快速开发，一级分类只做新增，暂时不考虑修改和删除，如果一定要删，就去数据库删吧。我们接下来，需要通过一级分类，获取所有的二级分类。开始 ... [详细]

蜡笔小新 2023-10-17 15:30:11
bootstrap
宋宝华：用systemd-nspawn运行最轻量级容器

systemd-nspawn可以创建最轻量级的容器（ns的意思就是namespace），本文的实验平台是Ubuntu16.04，x86_64机器。本文的目的是：在Ubuntu中用syst ... [详细]

蜡笔小新 2023-10-17 14:49:15
bootstrap
【珍藏】2019年最新Vue相干佳构开源项目库汇总

媒介本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时候为2017年6月12日，许多内容早已逾期或是许多近期优异组件未被收录，所以小肆 ... [详细]

蜡笔小新 2023-10-17 14:33:46

IHH_MCWONG_142

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章